jQuery - 删除选择选项：点击时选择的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8439712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - remove select option :selected attribute on click
提问by Zumwalt
I'm working on a multiselect that pops up in a modal dialog. When the dialog closes, I'm populating a <ul>with <li>'s that contain text from the :selectedoptions. When each individual <li>is clicked, I want the <li>to fade away and the corresponding :selected<option>to become unselected. I have everything working except unselecting the <option>.
我正在处理在模式对话框中弹出的多选。当对话框关闭，我填充一个<ul>与<li>“包含从文本•:selected选项。当每个人<li>被点击时，我希望<li>淡出，相应:selected<option>的变为未选中状态。除了取消选择<option>.
Here's my code:
这是我的代码：
$('.control-finished').click(function(){
$('ul.multiselect-dropdown-options-'+name+'').empty();
$('option:selected', select).each(function(index, value) {
var livalue = $(this).attr('value');
$('ul.multiselect-dropdown-options-'+name+'').append('<li class="dropdown-option '+livalue+'">'+$(value).text()+'<!-- <a class="remove-option '+livalue+'"> -->x</li>');
$('li.dropdown-option').click(function(){
$(this).fadeOut(500, function() { $(this).remove(); });
$('option:selected', this).removeAttr('selected');
});
});
});
Any help is greatly appreciated!
任何帮助是极大的赞赏！
回答by Vigrond
I believe your problem is on this line:
我相信你的问题是在这条线上：
$('option:selected', this).removeAttr('selected');
This is saying, find all option:selected that is a descendent of li.dropdown-option. But you're deleting these after the fadeout, so of course it's not going to find it.
这就是说，找到所有 option:selected 是 li.dropdown-option 的后代。但是你在淡出之后删除了这些，所以它当然不会找到它。
So you need to change the 2nd parameter in the jQuery function above. (this), to the actual parent dom element you wish to search under.
所以你需要改变上面 jQuery 函数中的第二个参数。(this), 到您希望在其下搜索的实际父 dom 元素。
I don't know what your HTML looks like, so I can't provide you with a more detailed solution.
我不知道你的 HTML 是什么样的，所以我无法为你提供更详细的解决方案。
回答by Ahmad
I had the same problem I tried
我遇到了同样的问题
removeAttr('selected');
removeProp('selected');
prop('selected',false);
changing the select box value by
通过更改选择框值
$('#selectboxID').val(newVal);
...
...
but still the selected attributes exist even with a empty value I finally did the following to remove it
但即使值为空，所选属性仍然存在我最终执行以下操作将其删除
$('#selectboxID').html($('#selectboxID').html().replace('selected',''));
回答by adeneo
$('option:selected').attr('selected', '');
or for single select box
或单个选择框
$('#selectboxID').attr('selected', '-1');
But then again, your actually binding a click function inside your each function, and trying to remove a selected value on select boxes inside a 'this' scope after you've already used remove() on the same 'this' scope?
但是话又说回来，您实际上在每个函数中绑定了一个单击函数，并在您已经在同一个“this”作用域上使用了 remove() 之后尝试删除“this”作用域内选择框上的选定值？
回答by rkw
Try this: http://jsfiddle.net/rkw79/mmBKf/3/
试试这个：http: //jsfiddle.net/rkw79/mmBKf/3/
$('select').change(function() {
$('ul').empty();
$('option:selected').each(function() {
$('<li></li>').text($(this).val()).appendTo($('ul'));
});
});
$('ul').on('click', 'li', function() {
$('option[value="' + $(this).text() + '"]').prop('selected','');
$(this).remove();
});
回答by Developer
you can try with this. hope this helps you.
你可以试试这个。希望这对你有帮助。
var $element = $("#DropDownList1");
$element.change(function () {
$element.find('option').removeAttr('selected')
.filter("[value=" + this.value + "]")
.attr("selected", "selected");
console.log(this.value);
});
cheers.
干杯。
