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|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|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|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|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|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|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|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|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|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></selec...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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