Question

所需行为

从选项A中删除现有的selected属性（如果存在）并将selected属性应用于选项B.

当前行为

当前尝试适用于第一次更改，但在后续更改中继续将所选属性添加到所选选项，以便有多个选项具有所选属性。

约束

下面定义的HTML结构和选择器，即.my_div是必需的。

的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); 
});

Answer 1

这个工作得很好：

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

Answer 2

试试这个，

$(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"); 

});

Answer 3

扩展lvil的答案，其工作原因是因为option:selected捕获实际选定的<option>而不是具有selected属性的option[selected]属性<option>。我的解决方案使用更合适的选择器，而不是扫描$(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>

{{1}}

如何从选项A中删除选定的属性，然后在更改时重新应用于选项B？

3 个答案: