Question

Here’s some background. I hope someone has some ideas. I know some basic jQuery but this is a bit beyond me:

I have the following function:

function updateField(entity, obj, type) {
    var val = obj.val();
    var idArr = obj.attr("id");
    var idTmp = idArr.split("_");
    var id = idTmp[1];
    var pk = $('#Meta_PartitionKey').val();
    var rk = $("div[id='rk_" + id + "']").html(); 
    enableLoadingIcon();
    $.ajax({
        cache: false,
        url: "/Administration/" + entity + "s/Update",
        data: { pk: pk, rk: rk, fld: type, val: val },
        success: function () {
            disableLoadingIcon(); 
        } 
    }); 
};

This is set up to look for changes here:

  $(document).ready(function () {
      $("input[id^='Position_'], select[id^='Level_'], select[id^='Status_'],").change(function (e) {
          var type = $(this).attr('id').split('_')[0];
          updateField('Link', $(this), type);
      });
  });

and HTML:

<div class="rep_td0"> 
   <select id="Level_0" name="AdminDetails[0].Level"><option value="0">0</option>
   <option value="1">1</option>
   <option selected="selected" value="2">2</option>
   </select>
</div>
<div class="rep_td0 level_2">Link2</div> 

When the function updateField is called with an entity type of “Level” then I need to change the class of the following
rep_tdo, remove whatever level is set and change to a Level that matches the choice.

Can someone help me out here.

Answer 1

Iterate through the options and toggle class for each of them

var obj = $(this).parent().next();
$(this).children().each(function()
{
    obj.toggleClass("level_" + this.value, this.selected);
});