如何从选择A删除选定的属性，然后再应用到B选项上的变化？(How to remove a selec

所需的行为

移除现有selected从选项A属性（如果它存在），并应用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> 

文章来源: How to remove a selected attribute from option A and then re-apply to option B on change?