代码之家 › 专栏 › 技术社区 › Jay Corbett

如何在jQuery中的select元素中选择特定选项?

jquery

630

Jay Corbett · 技术社区 · 17 年前

This this 和 this 这些都是有用的答案。

示例标记

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

19 回复 | 直到 9 年前

1295

Nante gene_wood 7 年前

通过值获取中间选项元素的选择器为

$('.selDiv option[value="SEL1"]')

$('.selDiv option:eq(1)')

对于已知文本:

$('.selDiv option:contains("Selection 1")')

编辑 :如上所述,OP可能是在更改下拉列表中的选定项之后出现的。在1.6版及更高版本中,建议使用prop()方法:

$('.selDiv option:eq(1)').prop('selected', true)

在旧版本中:

$('.selDiv option:eq(1)').attr('selected', 'selected')

编辑2 :在Ryan的评论之后。“选择10”上的匹配可能不需要。我发现没有 selector 匹配全文,但 filter

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

编辑3 :小心使用 $(e).text() 因为它可能包含使比较失败的换行符。当选项隐式关闭(否)时会发生这种情况 </option> 标签):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

如果你只是使用 e.text 任何额外的空格,如尾随的换行符,都将被删除,从而使比较更加可靠。

149

Andrew Whitaker 14 年前

上面的方法都没有提供我需要的解决方案,所以我想我会提供适合我的方法。

$('#element option[value="no"]').attr("selected", "selected");

Leandro Ardissone 16 年前

你可以用 val() 方法:

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

Pbk1303 12 年前

从价值上看,什么对我有用 jquery1.7

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

iCollect.it Ltd 10 年前

val() . 还有一些方法在jQuery1.6中更改了,因此需要更新。

$select jQuery对象是否指向所需的 <select>

var $select = $('.selDiv .opts');

注1-使用val()进行值匹配:

对于值匹配,使用 val() https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

的setter版本 .val() 在上实施 select selected 匹配的性质 option value ,因此在所有现代浏览器上都可以正常工作。

如果要直接设置选项的选定状态,可以使用 prop attr )带着 boolean 参数(而不是文本值 挑选出来的 ):

https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

注3-考虑未知值:

如果你使用 val() 选择 <option> $select.val() null .

因此,对于所示的示例,并且为了健壮性,您可以使用如下内容 https://jsfiddle.net/1250Ldqn/

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

注4-精确文本匹配:

filter 有功能。例如 https://jsfiddle.net/yz7tu49b/2/ :

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

虽然如果您可能有额外的空白,您可能希望在检查中添加修剪,如中所示

    return $.trim(this.text) == "some value to match";

注5:按索引匹配

如果你想通过索引进行匹配,只需索引选择的子项即可。 https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

https://jsfiddle.net/yz7tu49b/5/ :

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

注意6-使用change()触发新选择

在上述所有情况下,更改事件不会触发。这是经过设计的,这样您就不会出现递归更改事件。

要生成更改事件,如果需要,只需向 .change() 选择 对象e、最简单的例子是 https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

[value="SEL2"] ,但您必须记住,与所有其他选项相比,属性选择器的速度相对较慢。

João Paulo Oliveira 11 年前

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

perumal N 6 年前

确实可以尝试以下方法

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

对于“选择2”选项触发需要使用的选项

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>

Udo Held 14 年前

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

它应该选择您想要的选项。

raddevus 10 年前

jquery-2.1.4

$('#MySelectionBox').val(123).change();

如果有字符串值,请尝试以下操作:

$('#MySelectionBox').val("extra thing").change();

其他的例子对我不起作用,所以这就是为什么我要添加这个答案。

我在以下网址找到了原始答案: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

Jay Corbett 17 年前

回答我自己的文档问题。我相信还有其他方法可以实现这一点,但这是可行的,并且这段代码已经过测试。

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

Nick Tsai 9 年前

$('select.opts').val('SEL1').change();

要从作用域设置选项,请执行以下操作:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

这段代码使用选择器找出带有条件的选择对象,然后通过 attr() .

change() 将属性设置为后的事件 selected

Miguel Q 12 年前

$("#yourlist :nth(1)").prop("selected","selected").change();

这允许更改列表,并触发更改事件。 “:n(n)”从索引0开始计数

perumal N 8 年前

试试这个

您只需使用select字段id而不是#id(即#select_名称)

而不是 期权价值 价值

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

CRUSADER 13 年前

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

Pratik Kamani 10 年前

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

Andrej Gaspar 13 年前

如果将属性发送到函数并需要更新select选项,则选择Jquery

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

Bud Damyanov 10 年前

这个 $('select').val('the_value'); 查找正确的解决方案,如果有数据表行,则:

$row.find('#component').val('All');

FLICKER 10 年前

document.getElementById("mySelect").selectedIndex = "2";

Md. Russel Hussain 9 年前

谢谢你的提问。希望这段代码对您有用。

var val = $("select.opts:visible option:selected ").val();

Jaydeep rlib 7 年前

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

或

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

Richard 6 年前

这里有一些建议为什么你应该使用 prop 而不是 attr. 肯定用 attr 会给你奇怪的结果,除了最简单的情况。

我想要一个解决方案,从任意分组的 select 选项自动选择另一个选项 选择

$("#country").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent correctly with prop
  $('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);
});



$("#country2").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent wrongly with attr
  $('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <form>
    <h4 class="text-success">Props to the good stuff ;) </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country" id="country">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
  <hr>

  <form>
    <h4 class="text-danger"> Attributing the bad stuff to attr </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country-2" id="country2">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent2">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
</div>

如代码片段所示, 道具 每次都能正常工作,但是选择一次选项后,无法正确选择。

关键点: 我们通常对属性的属性感兴趣,因此使用它更安全结束在大多数情况下。