我有一个选择字段,其中有一些选项。现在我需要用jQuery选择其中一个选项。但是,当我只知道必须选择的选项的值时,我该怎么做呢?

我有以下HTML:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

我需要选择值为val2的选项。如何做到这一点呢?

这是一个演示页面: http://jsfiddle.net/9Stxb/


当前回答

这里有很多解决方案来改变所选的值,但没有一个对我有用,因为我的挑战与操作略有不同。我需要根据这个值过滤另一个选择下拉。

大多数人使用$("div.id_100").val("val2").change();让它为他们工作。我不得不稍微修改这个$("div#idOfDiv select").val("val2").trigger("change")。

这还不够,我还必须确保等待文档加载。我的完整代码如下所示:

$(document).ready(function() {
    $("div#idOfDiv select").val("val2").trigger("change");
});

其他回答

一个简单的答案是,在HTML中:

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

在jQuery中,通过按钮或其他方式调用下面的函数

$('#idUkuran').val(11).change();

这是简单的,100%的工作,因为它是从我的工作……:)

下面是一个类似jQuery插件的简单函数。

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

你可以简单地做这样的事情:

$('.id_100').selectOption('val2');

使用这个的原因是因为您将所选语句更改为跨浏览器支持的DOM,也会触发更改,以便您可以捕获它。

它基本上是一种人类动作模拟。

当值是ID而文本是代码时,我遇到了一个问题。不能使用代码设置值,但不能直接访问ID。

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here

当控件是动态创建的,而不是在静态HTML页面中时,选择下拉控件没有动态更改,这似乎是一个问题。

在jQuery中,这个解决方案为我工作。

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

就像附录一样,第一行代码没有第二行,实际上是透明的,在设置索引后检索所选索引是正确的,如果您实际单击控件,它将显示正确的项目,但这并没有反映在控件的顶部标签中。

选择值后使用change()事件。从文档中可以看到:

如果字段在内容没有改变的情况下失去焦点,则不会触发事件。要手动触发事件,请应用不带参数的.change():

$("#select_id").val("val2").change();

更多信息请参见.change()。