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 answerfunctionupdateValues() {
  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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><divclass="my_div">
    my_div: 
    <select><optionvalue="none">none</option><optionvalue="val1">val1</option><optionvalue="val2">val2</option><optionvalue="val3">val3</option><optionvalue="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) --><divid="my_option"></div><!-- another select element to demonstrate lack of interference with other options --><divclass="other_div">
  other select:
  <select><optionvalue="none">none</option><optionvalue="val1">val1</option><optionvalue="val2">val2</option><optionvalue="val3"selected="selected">val3</option><optionvalue="val4">val4</option></select></div><!-- outputs element in .other_div with selected attribute ([selected], not :selected) --><divid="other_option"></div>