使用jquery选择下拉选项

时间:2011-02-01 15:43:26

标签: javascript jquery html select drop-down-menu

我想知道是否有可能让jQuery在下拉框中选择一个选项,比如说第4项?

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

我希望用户点击链接,然后让选择框更​​改其值,就像用户通过单击选项选择它一样。

14 个答案:

答案 0 :(得分:171)

怎么样

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

示例http://www.jsfiddle.net/gaby/CWvwn/


对于现代版本的jquery,您应该使用.prop()代替.attr()

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

示例http://jsfiddle.net/gaby/CWvwn/1763/

答案 1 :(得分:139)

解决方案:

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

答案 2 :(得分:47)

HTML select元素具有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;

答案 3 :(得分:22)

最简单的方法是val(value)功能:

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

要获得所选值,您不需要参数:

$('select').val();

另外,如果你有<option value="valueToSelect">...</option>,你可以这样做:

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

DEMO

答案 4 :(得分:19)

如果您的选项有值,您可以这样做:

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

'select'将是您的选择或类选择器的ID。或者如果只有一个选择,您可以使用示例中的标记。

答案 5 :(得分:18)

我会这样做

function setHeight() {
    var windowWidth = window.innerWidth;

    var latestPostsWrapperHeight = $('#latestPosts').height();
    var tabPane = $('#latestPosts').find('.tab-pane');
    var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');

    var popularPostsWrapperHeight = $('#popularPosts').height();
    var profileWrapper = $('#popularPosts').find('.pofile-wrapper');

    if(windowWidth > 767) {
        $.each(tabPane, function() {
            $(this).height(latestPostsWrapperHeight - 70);
        });

        $.each(tabPaneLists, function() {
            $(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
        });

        $.each(profileWrapper, function() {
            $(this).outerHeight(popularPostsWrapperHeight);
        });
    }
    console.log(windowWidth);
}
$(document).ready(function() {
  setHeight();
});
$(window).resize(function() {
  setHeight();
});

答案 6 :(得分:8)

如果要选择具有特定值的选项,请使用以下代码:

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

答案 7 :(得分:3)

我更喜欢nth-child()到eq(),因为它使用基于1的索引而不是基于0的索引,这在我的大脑上稍微容易一些。

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

答案 8 :(得分:3)

用&#39;&#39;元素通常我们使用&#39; value&#39;属性。这样可以更容易设置:

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

答案 9 :(得分:3)

试试这个:

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

问候!

答案 10 :(得分:2)

回答id:

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

答案 11 :(得分:2)

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

答案 12 :(得分:0)

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

这里有一点需要注意:如果你有javascript正在观看select / option的更改事件,则需要添加.trigger('change')以便代码成为。

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

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

答案 13 :(得分:0)

这对我有用:

$selectedindex=4

如果您想随机化选项,则始终可以执行以下操作:

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

第2个项目符号不在您的问题范围内,但它可以说明第1个项目符号应如何应用/修改为要求。