根据另一个attritube的结果设置选择标签值

Question

I have a select element with options which contains groups:

<select id="my_SiteGroups" style="width:200px;">
      <option value="default" disabled="disabled">Select a group</option>
      <option value="Admin">Admin</option>
      <option value="Dev">Dev</option><option value="SSH-RAR">SSH-RAR</option> 
      <option value="Students">Students</option>
      <option value="test">test</option>
</select>

When I select a group I get an XML response with the selected groups's information:

<GetGroupInfo xmlns=
   "http://schemas.microsoft.com/sharepoint/soap/directory/">
   <Group ID="3" Name="Group1" Description="Description" OwnerID="1" 
      OwnerIsUser="False" />
</GetGroupInfo>

I am trying to use the XML response to populate input elements with the groups information so I can use another function to update the groups info. This is what it looks like:

Based on the group ownerID from the groupInfo XML above, I'm trying to set the current group owner. The group owner select contains a list of all my users and is populated like this:

<select id="groupOwner">
<option value="default">Select a group owner</option>
<option value="i:0#.w|itun\cbsadmin_comp.c" ownerid="70">cbsadmin</option>
. 
. 
. 
</select>

So from this I'm trying to get my code to look at the ownerId of the group from the returned XML, go through the groupOwner options in my groupOwner select tag and look for which option has the matching ownerID, then set my select tags value using that options value.

JS:

function groupInfo(group){
  $().SPServices({
    operation: "GetGroupInfo",
    groupName: group,
    completefunc: function (xData, Status){
      var result = $(xData.responseXML);
      result.find('Group').each(function(){
        $('#groupID').val($(this).attr('ID'));
        $('#groupName').val($(this).attr('Name'));
        $('#groupDesc').val($(this).attr('Description'));
        $('#groupOwner').val($(this).attr('OwnerID'));
      });
    }
  });

HTML:

  <td>
    <label>Group ID: </label><input type="text" id="groupID" disabled="true"/></br>
    <label>Name: </label><input type="text" id="groupName" /></br>
    <label>Description: </label><input type="text" id="groupDesc" /></br>        
    <label>Owner: </label><select id="groupOwner"><option value="default">Select a Group Owner</option></select></br>
    <div class="listControl"><a onclick="updateGroupInfo()">Update Group Info</a></div>
  </td>

Answer 1

Try to use prop() like,

// if owner id is based on indexing
$('#groupOwner').prop('selectedIndex',$(this).attr('OwnerID'));

Or try

$('#groupOwner option').removeAttr('selected');// remove selected attribute first
// then add selected attribute based on ownerId
$('#groupOwner option[value="'+$(this).attr('OwnerID')+'"]').attr('selected','selected');

Read removeAttr()