blocks|key|1018129|text|解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018130|$("#element-id").val('the+value+of+the+option');|code-block|syntax|javascript|1018131|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The solution:

<pre><code>$("#element-id").val('the value of the option');
</code></pre>

blocks|key|803730|text|HTML+select元素有一个selectedIndex属性，可以写入该属性以选择特定的选项：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|803731|$('select').prop('selectedIndex',+3);+//+select+4th+option|code-block|syntax|javascript|803732|使用普通JavaScript可以通过以下方式实现：|803733|//+use+first+select+element
var+el+=+document.getElementsByTagName('select')[0];+
//+assuming+el+is+not+null,+select+4th+option
el.selectedIndex+=+3;|803734|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/HTML/Element/select#attr-selectedIndex^0|G|D|G|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

HTML select elements have a <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/select#attr-selectedIndex" rel="noreferrer"><code>selectedIndex</code></a> property that can be written to in order to select a particular option:

<pre><code>$('select').prop('selectedIndex', 3); // select 4th option
</code></pre>

Using plain JavaScript this can be achieved by:

<pre><code>// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;
</code></pre>

blocks|key|1018653|text|我会这样做的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018654|+$("#idElement").val('optionValue').trigger('change');|code-block|syntax|javascript|1018655|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I would do it this way

<pre><code> $("#idElement").val('optionValue').trigger('change');
</code></pre>

blocks|key|1018181|text|如果您的选项具有值，则可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018182|$('select').val("the-value-of-the-option-you-want-to-select");|code-block|syntax|javascript|1018183|'+select‘将是您的select或类选择器的id。或者，如果只有一个select，您可以使用示例中的标记。|1018184|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

if your options have a value, you can do this:

<pre><code>$('select').val("the-value-of-the-option-you-want-to-select");
</code></pre>

'select' would be the id of your select or a class selector. or if there is just one select, you can use the tag as it is in the example.

blocks|key|1018645|text|如果要选择具有特定值的选项，请使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018646|$('select>option[value="'+%2B+value+%2B+'"]').prop('selected',+true);|code-block|syntax|javascript|1018647|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use the following code if you want to select an option with a specific value:

<pre><code>$('select&gt;option[value="' + value + '"]').prop('selected', true);
</code></pre>

blocks|key|1018660|text|+Try+with+the+below+codes.+All+should+work.+
++++$('select').val(2);
++++$('select').prop('selectedIndex',+1);
++++$('select>option[value="5"]').prop('selected',+true);
++++$('select>option:eq(3)').attr('selected',+'selected');
++++$("select+option:contains(COMMERCIAL)").attr('selected',+true);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1018661|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> Try with the below codes. All should work. 
 $('select').val(2);
 $('select').prop('selectedIndex', 1);
 $('select&gt;option[value="5"]').prop('selected', true);
 $('select&gt;option:eq(3)').attr('selected', 'selected');
 $("select option:contains(COMMERCIAL)").attr('selected', true);
</code></pre>

blocks|key|803556|text|我更喜欢nth-child()而不是eq()，因为它使用基于1的索引，而不是基于0的索引，这在我的大脑中稍微容易一些。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|803557|//selects+the+2nd+option
$('select>option:nth-child(2)').attr('selected',+true);|code-block|syntax|javascript|803558|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I prefer nth-child() to eq() as it uses 1-based indexing rather than 0-based, which is slightly easier on my brain.

<pre><code>//selects the 2nd option
$('select&gt;option:nth-child(2)').attr('selected', true);
</code></pre>

blocks|key|803797|text|+$('select>option:eq(3)').attr('selected',+'selected');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|803798|这里需要注意的是，如果你让javascript监视select/option的更改事件，你需要添加.trigger('change')，这样代码就变成了。|unstyled|offset|length|style|CODE|803799|+$('select>option:eq(3)').attr('selected',+'selected').trigger('change');|803800|因为只调用.attr('selected',+'selected')不会触发事件|803801|entityMap^0|0|1D|I|0|0|5|T|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@$G|S|H|T|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|F|7|V|8|@$G|W|H|X|I|J]]|9|@]|A|$]]|$1|O|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|P|$]]

<pre><code> $('select&gt;option:eq(3)').attr('selected', 'selected');
</code></pre>

One caveat here is if you have javascript watching for select/option's change event you need to add <code>.trigger('change')</code> so the code become. 

<pre><code> $('select&gt;option:eq(3)').attr('selected', 'selected').trigger('change');
</code></pre>

because only calling <code>.attr('selected', 'selected')</code> does not trigger the event

blocks|key|803843|text|对于'‘元素，我们通常使用'value’属性。这将使设置变得更容易：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|803844|$('select').val('option-value');|code-block|syntax|javascript|803845|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

With '' element usually we use 'value' attribute. It will make it easier to set then:

<pre><code>$('select').val('option-value');
</code></pre>

blocks|key|1018615|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018616|$('#mySelectElement+option')[0].selected+=+true;|code-block|syntax|javascript|1018617|致以问候！|1018618|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try this:

<pre><code>$('#mySelectElement option')[0].selected = true;
</code></pre>

Regards!

blocks|key|1018415|text|用id回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018416|$('#selectBoxId').find('option:eq(0)').attr('selected',+true);|code-block|syntax|javascript|1018417|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

answer with id:

<pre><code>$('#selectBoxId').find('option:eq(0)').attr('selected', true);
</code></pre>

blocks|key|1018736|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018737|$selectedindex=4|code-block|syntax|javascript|1018738|如果你想随机化选项，你总是可以这样做：|1018739|$0selectedindex=Math.floor((Math.random()*($0.length-1)%2B1)|1018740|虽然第二个问题超出了您的问题范围，但它用于说明如何将第一个应用/修改为请求。|1018741|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This works for me:
<pre><code>$selectedindex=4
</code></pre>
If you want to randomise options, you could always do something like this:
<pre><code>$0selectedindex=Math.floor((Math.random()*($0.length-1)+1)
</code></pre>
Whilst the 2nd lies outside scope of your questions, it serves to illustrate how 1st could be applied / amended as req.

I was wondering if it’s possible to get jQuery to select an <code>&lt;option&gt;</code>, say the 4th item, in a dropdown box?

<pre><code>&lt;select&gt;
 &lt;option&gt;&lt;/option&gt;
 &lt;option&gt;&lt;/option&gt;
 &lt;option&gt;&lt;/option&gt;
 &lt;option&gt;&lt;/option&gt;
 &lt;option&gt;&lt;/option&gt;
&lt;/select&gt;
</code></pre>

I want the user to click a link, then have the <code>&lt;select&gt;</code> box change its value, as if the user has selected it by clicking on the <code>&lt;option&gt;</code>.

How to use jQuery to select a dropdown option?

jQuery

我想知道是否有可能让jQuery在下拉框中选择一个<option>，比如第4项？<select> <option></option> <option></option> <option></option> <option></option> <option></option></select>我希望用户单击一个链接，然后让<select>框更改它的值，就像用户通过单击

问如何使用jQuery选择下拉选项？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery选择下拉选项？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery选择下拉选项？
EN