How To Remove A Selected Attribute From Option A And Then Re-apply To Option B On Change?

Desired Behaviour Remove existing selected attribute from Option A (if it exists) and apply selected attribute to Option B. Current Behaviour Current attempt works on first chang

Solution 1:

This one worked fine:

var new_selection = $(this).find('option:selected');
$('option').not(new_selection).removeAttr('selected');
new_selection.attr("selected",true);

Solution 2:

Try this,

$(document).on("change",".my_div", function() {
// remove old selected attribute - this doesn't enable solution
// $(this).find('option:selected').removeAttr('selected');

// apply selected attribute to new selection
$(".selected").removeAttr("selected");
var new_selection = $(this).find('option:selected');
new_selection.attr("selected",true).addClass(".selected"); 

});

Solution 3:

Expanding on lvil's answer, the reason it works is because option:selected captures the actual selected <option> rather than the one with the selected attribute, which would be option[selected]. My solution uses more appropriate selectors instead of scanning the entire document for <option> elements:

$(document).on('change', '.my_div', function () {
  // remove old selected attributes only in .my_div
  $('.my_div').find('option[selected]').removeAttr('selected');
  // apply selected attribute to new selection only in .my_div
  $('.my_div').find('option:selected').attr('selected', true);

  updateValues();
});

updateValues();

// below here is just to demonstrate output and is not required in this answer
function updateValues() {
  var my_option = $('.my_div option[selected]').get(0),
      other_option = $('.other_div option[selected]').get(0);

  if(my_option) {
    $('#my_option').text(my_option.outerHTML);
  } else {
    $('#my_option').text('none selected');
  }
  
  if(other_option) {
    $('#other_option').text(other_option.outerHTML);
  } else {
    $('#other_option').text('none selected');
  }
}

/* easier to read */
html {
  font-family: monospace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="my_div">
    my_div: 
    <select>
        <option value="none">none</option>
        <option value="val1">val1</option>
        <option value="val2">val2</option>
        <option value="val3">val3</option>
        <option value="val4">val4</option>
    </select>
</div>
<!-- below here is just to demonstrate output and is not required in this answer -->

<!-- outputs element in .my_div with selected attribute ([selected], not :selected) -->
<div id="my_option"></div>
<!-- another select element to demonstrate lack of interference with other options -->
<div class="other_div">
  other select:
  <select>
      <option value="none">none</option>
      <option value="val1">val1</option>
      <option value="val2">val2</option>
      <option value="val3" selected="selected">val3</option>
      <option value="val4">val4</option>
  </select>
</div>
<!-- outputs element in .other_div with selected attribute ([selected], not :selected) -->
<div id="other_option"></div>