我有一个选择字段,其中有一些选项。现在我需要用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/


当前回答

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

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

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

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

其他回答

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

var value;

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

//Do work here

下面是一个类似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,也会触发更改,以便您可以捕获它。

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

有一个更简单的方法,不需要你进入选项标签:

$("div.id_100 select").val("val2");

看看这个jQuery方法。

注意:上面的代码不会触发变更事件。 为了完全兼容,你需要这样调用它:

$("div.id_100 select").val("val2").change();

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

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

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

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

我需要选择一个选项,但两个选项可能具有相同的值。 这纯粹是为了视觉(前端)的差异。 你可以选择一个选项(即使两个值相同),如下所示:

let options = $('#id_100 option')
options.prop('selected', false)   // Deselect all currently selected ones
let option = $(options[0])        // Select option from the list
option.prop('selected', true)
option.parent().change()          // Find the <select> element and call the change() event.

这将取消当前选中的所有<option>元素。选择第一个元素(使用选项[0]),并使用change事件更新<select>元素。