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


当前回答

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

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

其他回答

<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>
</select>

按值设置为Pending状态:

$('#contribution_status_id').val("2");

一个简单的答案是,在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,也会触发更改,以便您可以捕获它。

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

我认为最简单的方法是选择设置val(),但你可以检查以下。查看如何处理选择和选项标签在jQuery?有关选项的详细信息。

$('div.id_100  option[value="val2"]').prop("selected", true);

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

没有优化,但下面的逻辑在某些情况下也很有用。

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

选择值为'val2'的选项:

$('.id_100 option[value=val2]').attr('selected','selected');