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

发布于 2024-10-15 07:09:17 字数 393 浏览 3 评论 0原文

我想知道是否可以让 jQuery 在下拉框中选择（例如第四项）？

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

我希望用户单击一个链接，然后让

原文

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

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不必了 2024-10-22 07:09:17

怎么样

$('select>option:eq(3)').attr('selected', true);

示例：

$('select>option:eq(3)').attr('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

对于现代版本的 jquery，您应该使用 .prop() 而不是 <代码>.attr()

$('select>option:eq(3)').prop('selected', true);

示例：

$('select>option:eq(3)').prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

How about

$('select>option:eq(3)').attr('selected', true);

Example:

$('select>option:eq(3)').attr('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

for modern versions of jquery you should use the .prop() instead of .attr()

$('select>option:eq(3)').prop('selected', true);

Example:

$('select>option:eq(3)').prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

回复收藏 0 原文

情绪 2024-10-22 07:09:17

解决办法：

$("#element-id").val('the value of the option');

The solution:

$("#element-id").val('the value of the option');

回复收藏 0 原文

请止步禁区 2024-10-22 07:09:17

HTML 选择元素具有 selectedIndex可以写入以选择特定选项的属性：

$('select').prop('selectedIndex', 3); // select 4th option

使用纯 JavaScript 可以通过以下方式实现：

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

HTML select elements have a selectedIndex property that can be written to in order to select a particular option:

$('select').prop('selectedIndex', 3); // select 4th option

Using plain JavaScript this can be achieved by:

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

回复收藏 0 原文

慵挽 2024-10-22 07:09:17

我会这样做

 $("#idElement").val('optionValue').trigger('change');

I would do it this way

 $("#idElement").val('optionValue').trigger('change');

回复收藏 0 原文

ぃ双果 2024-10-22 07:09:17

最简单的方法是 val(value) 函数：

$('select').val(2);

并且要获取不提供任何参数的选定值：

$('select').val();

此外，如果您有，你可以这样做：

$('select').val("valueToSelect");

DEMO

The easiest way is val(value) function:

$('select').val(2);

And to get the selected value you give no arguments:

$('select').val();

Also, you if you have <option value="valueToSelect">...</option>, you can do:

$('select').val("valueToSelect");

DEMO

回复收藏 0 原文

遗弃Ｍ 2024-10-22 07:09:17

如果你的选项有一个值，你可以这样做：

$('select').val("the-value-of-the-option-you-want-to-select");

“select”将是你的选择器或类选择器的ID。或者，如果只有一个选择，您可以使用示例中的标签。

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

$('select').val("the-value-of-the-option-you-want-to-select");

'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.

回复收藏 0 原文

我的鱼塘能养鲲 2024-10-22 07:09:17

如果您想选择具有特定值的选项，请使用以下代码：

$('select>option[value="' + value + '"]').prop('selected', true);

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

$('select>option[value="' + value + '"]').prop('selected', true);

回复收藏 0 原文

唯憾梦倾城 2024-10-22 07:09:17

 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);

 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);

回复收藏 0 原文

恍梦境° 2024-10-22 07:09:17

与 eq() 相比，我更喜欢 nth-child()，因为它使用基于 1 的索引而不是基于 0 的索引，这对我来说稍微容易一些。

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

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

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

回复收藏 0 原文

梦在深巷 2024-10-22 07:09:17

 $('select>option:eq(3)').attr('selected', 'selected');

这里需要注意的是，如果您有 JavaScript 监视 select/option 的更改事件，则需要添加 .trigger('change') ，以便代码变为。

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

因为仅调用 .attr('selected', 'selected') 不会触发该事件

 $('select>option:eq(3)').attr('selected', 'selected');

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

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

because only calling .attr('selected', 'selected') does not trigger the event

回复收藏 0 原文

骄傲 2024-10-22 07:09:17

对于 '' 元素，我们通常使用 'value' 属性。这将使设置变得更容易：

$('select').val('option-value');

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

$('select').val('option-value');

回复收藏 0 原文

往事随风而去 2024-10-22 07:09:17

试试这个：

$('#mySelectElement option')[0].selected = true;

问候！

Try this:

$('#mySelectElement option')[0].selected = true;

Regards!

回复收藏 0 原文

冰雪之触 2024-10-22 07:09:17

用id回答：

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

answer with id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

回复收藏 0 原文

倾｀听者〃 2024-10-22 07:09:17

这对我有用：

$selectedindex=4

如果你想随机化选项，你总是可以这样做：

$0selectedindex=Math.floor((Math.random()*($0.length-1)+1)

虽然第二个超出了你的问题范围，但它可以说明如何根据要求应用/修改第一个。

This works for me:

$selectedindex=4

If you want to randomise options, you could always do something like this:

$0selectedindex=Math.floor((Math.random()*($0.length-1)+1)

Whilst the 2nd lies outside scope of your questions, it serves to illustrate how 1st could be applied / amended as req.

回复收藏 0 原文

~没有更多了~

关于作者

童话里做英雄

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。