jQuery 如何设置选择框选定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12434931/
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
How to set select box selected value
提问by kamala
I have one input field with variable width like small, large, medium.
I have CSS styling for that.
我有一个宽度可变的输入字段，例如small, large, medium。我有 CSS 样式。
Example:
例子：
case 1: <input type="text" id="a1" class="title small required" />
case 2: <input type="text" id="a1" class="title medium" />
case 3: <input type="text" id="a1" class="title large required" />
Meanwhile I have a selectbox:
同时我有一个select盒子：
<select id="b1">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
What I require now is to check the inputfield has class of smallor mediumor largeand to set the relevant selectbox as selected. In jQuery I have directly set the selected values as medium, but still the drop-down shows small.
我现在要求是检查input字段的类small或medium或large并设置相关的select框，selected。在 jQuery 中，我直接将所选值设置为medium，但下拉列表仍显示small.
How do I check whether the inputfield has any of these classes using the hasClass()function? Are we able to check for this one at a time?
如何input使用该hasClass()函数检查该字段是否具有这些类中的任何一个？我们可以一次检查一次吗？
采纳答案by Parthi04
Use this
用这个
$('#b1').val("small"); // to set small as selected
$('#b1').val("medium");
$('#b1').val("large");
Use .hasClass() for the next one.
使用 .hasClass() 进行下一个。
var size = $("#al").hasClass('small')? 'small':
($("#a1").hasClass('medium')? 'medium' :
($("#a1").hasClass('large')? large :' null'));
alert(size);
回答by nnnnnn
"In jquery i have directly set the selected values as "medium", but still the drop-down shows small"
“在jquery中，我直接将选定的值设置为“中”，但下拉菜单仍然显示很小”
You don't show your jQuery code, but to set the value of the select element with id="1"you'd do this:
您不显示您的 jQuery 代码，但要设置 select 元素的值，id="1"您可以这样做：
$("#1").val("medium"); // or, obviously, use a variable instead of "medium"
But in your case you've used id="1"for both the select and the input field, which is invalid html - idshould be unique. In most browsers selecting by an id that is duplicated will just select the first element with that id.
但是在您的情况下，您已经用于id="1"选择和输入字段，这是无效的 html -id应该是唯一的。在大多数浏览器中，通过重复的 id 进行选择只会选择具有该 id 的第一个元素。
Change the ids and update your jQuery to match and it should work fine. (If that doesn't work, please update your question to actually show your JS code and we can provide further help.)
更改ids 并更新您的 jQuery 以匹配它，它应该可以正常工作。（如果这不起作用，请更新您的问题以实际显示您的 JS 代码，我们可以提供进一步的帮助。）
回答by Baz1nga
first of all idhas to be unique on an html page
首先id必须在 html 页面上是唯一的
Firstly choose a selector select your input element correctly.. I am using the title class selector since its there in all the cases
首先选择一个选择器正确选择你的输入元素..我正在使用标题类选择器，因为它在所有情况下都存在
var selectedOption="";
if($('.title').hasClass('small'))
{
selectedOption='small';
}
else if($('.title').hasClass('medium'))
{
selectedOption='medium';
}
else
{
selectedOption='large';
}
//i am assuming you have only one select on your page, else replace it with id selector
$("select option[value="+selectedOption+"]")).prop('selected','true'); //setting the correct option as selected
