Javascript jQuery 更改选定选项后刷新选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10921821/
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
Refreshing select after selected option is changed by jQuery
提问by jalperin
I'm updating the selected option programmatically using jQuery, but nothing changes in the browser. (That is, the old selected option remains selected instead of switching to the newly selected option.) Suggestions?
我正在使用 jQuery 以编程方式更新所选选项，但浏览器中没有任何变化。（也就是说，旧的选定选项保持选定状态，而不是切换到新选定的选项。） 建议？
Thanks. --Jeff
谢谢。--杰夫
I have a simple form like this:
我有一个像这样的简单表格：
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p> Task A: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form></div>
and my jQuery code looks like this:
我的 jQuery 代码如下所示：
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var form = $(this).parents('form');
var assigned = form.find(':selected').first().val();
form.find(':selected').each(function(index){
$(this).val( assigned ).change();
});
}
);
});
</script>
采纳答案by T.J. Crowder
I'm updating the selected option programmatically using jQuery
我正在使用 jQuery 以编程方式更新所选选项
Not as far as I can see. You're re-setting the value of the selected option, but not doing anything as far as I can tell to the actual selectbox.
远不及我所见。您正在重新设置 selected 的值option，但据我所知，对实际select框没有做任何事情。
To change a selectbox, you need to identify it, then call valon it, not one of its optionelements.
要改变一个select框，你需要确定它，然后调用val上它，它不是一个option元素。
I can't make out what you want your input[name="button1"]to do, but here's an example of updating a selectbox: Live copy| source
我不知道你想要input[name="button1"]做什么，但这里有一个更新select盒子的例子：Live copy| 来源
HTML:
HTML：
<select id="theSelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="button" id="theButton" value="Click me">
JavaScript:
JavaScript：
jQuery(function($) {
$("#theButton").click(function() {
$("#theSelect").val("2");
});
});
Separately, as j08691 pointed out in the comments, you can't assign the same idvalue ("assigner") to more than one element. idvalues mustbe uniquein the document. Your code doesn't show you using that id, so this may well be unrelated, but it's worth flagging up.
另外，正如 j08691 在评论中指出的那样，您不能将相同的id值 ( "assigner")分配给多个元素。id值在文档中必须是唯一的。您的代码没有显示您使用 that id，因此这很可能无关，但值得标记。
回答by Mike
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p>
Task A: <select name="assignment[]" id="assigner2">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner3">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var assigned = $("#assigner").val();
$('#form1 select').val( assigned );
}
);
});
</script>
