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 change, but on subsequent changes continues adding the selected attribute to the selected options so that there is more than one option with a selected attribute.

Constraints

HTML structure and selector defined below, ie .my_div, are required.

jsFiddle

http://jsfiddle.net/rwone/e7teL39u/

HTML

<div class="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>

jQuery

$(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
var new_selection = $(this).find('option:selected');
new_selection.attr("selected",true); 
});

回答1:

This one worked fine:

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

回答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"); 

});

回答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>

来源：https://stackoverflow.com/questions/27676680/how-to-remove-a-selected-attribute-from-option-a-and-then-re-apply-to-option-b-o

标签

jquery

html

html-select