如何在jQuery中的SELECT元素中选择特定选项？

时间：2008-11-24 16:18:20

标签： jquery

如果您知道索引，值或文本。如果您没有直接参考的ID，也可以。

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>

21 个答案:

答案 0 :(得分：1119)

按值获取中间选项元素的选择器是

$('.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')

EDIT2 ：在Ryan评论之后。 “选择10”上的匹配可能是不需要的。我发现没有selector与全文匹配，但filter有效：

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

EDIT3 ：请谨慎使用$(e).text()，因为它可能包含换行符，导致比较失败。当隐式关闭选项时，会发生这种情况（无</option>标记）：

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

如果你只是使用e.text任何额外的空格，就会删除尾随的换行符，这使得比较更加健壮。

答案 1 :(得分：114)

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

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

答案 2 :(得分：75)

您可以使用val()方法：

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

答案 3 :(得分：49)

根据价值，使用 jQuery 1.7 对我有用的是下面的代码，试试这个：

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

答案 4 :(得分：12)

你可以命名选择并使用它：

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

应该选择你想要的选项。

答案 5 :(得分：12)

有很多方法可以做到这一点，但最简洁的方法已经在val()的最高答案和大量参数中丢失了。从jQuery 1.6开始，一些方法也发生了变化，因此需要更新。

对于以下示例，我将假设变量$select是指向所需<select>标记的jQuery对象，例如通过以下内容：

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

注1 - 使用val（）进行值匹配：

对于值匹配，使用val()比使用属性选择器简单得多：https://jsfiddle.net/yz7tu49b/6/ 

$select.val("SEL2");

.val()的setter版本是通过将匹配的select的{​​{1}}属性设置为selected而在option代码上实现的，因此只需所有现代浏览器都很好。

注2 - 使用道具（＆＃39;选择＆＃39;，true）：

如果要直接设置选项的选定状态，可以使用value（不是prop）attr参数（而不是文本值boolean }）：

e.g。 https://jsfiddle.net/yz7tu49b/ 

selected

注3 - 允许未知值：

如果您使用$option.prop('selected', true); // Will add selected="selected" to the tag 选择val()，但val不匹配（可能会发生取决于值的来源），那么＆＃34;没有＆＃34;已被选中，<option>将返回$select.val()。

因此，对于显示的示例，为了健壮，您可以使用类似https://jsfiddle.net/1250Ldqn/的内容：

null

注4 - 完全匹配文本：

如果您想要按照确切的文字进行匹配，可以使用var $select = $('.selDiv .opts'); $select.val("SEL2"); if ($select.val() == null) { $select.val("DEFAULT"); } 功能。例如https://jsfiddle.net/yz7tu49b/2/：

filter

虽然如果您可能有额外的空格，您可能需要在支票中添加修剪，如

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

注5 - 按索引匹配

如果你想通过索引匹配，只需索引选择的子节点，例如https://jsfiddle.net/yz7tu49b/3/ 

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

虽然我现在倾向于避免使用直接的DOM属性来支持jQuery，以及面向未来的代码，所以也可以https://jsfiddle.net/yz7tu49b/5/完成：

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

注6 - 使用change（）来触发新选择

在上述所有情况下，更改事件都不会触发。这是设计使您不会结束递归更改事件。

要生成更改事件，如果需要，只需将对var $select = $('.selDiv .opts'); var index = 2; $select.children().eq(index).prop('selected', true); 的调用添加到jQuery .change()对象。例如第一个最简单的例子变成了https://jsfiddle.net/yz7tu49b/7/ 

select

还有很多其他方法可以使用属性选择器查找元素，例如var $select = $('.selDiv .opts'); $select.val("SEL2").change(); ，但是您必须记住，与所有其他选项相比，属性选择器相对较慢。

答案 6 :(得分：11)

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

答案 7 :(得分：9)

回答我自己的问题以获取文档。我确信还有其他方法可以实现这一点，但是这样做有效，并且测试了这段代码。

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

答案 8 :(得分：8)

使用 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

答案 9 :(得分：6)

用于设置选择触发的选择值：

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

用于设置范围的选项：

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

此代码使用选择器查找带条件的选择对象，然后按attr()更改所选属性。

另外，我建议在将属性设置为change()后添加selected事件，这样代码将接近用户更改选择。

答案 10 :(得分：6)

当我知道列表的索引时，我会使用它。

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

这允许列表更改，并触发更改事件。 “：nth（n）”从索引0开始计算

答案 11 :(得分：5)

我会选择： - 

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

答案 12 :(得分：4)

试试这个

你只需使用select field id而不是#id（即＃select_name）

而不是选项值使用您的选择选项值 

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

答案 13 :(得分：3)

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

答案 14 :(得分：3)

如果您将属性发送到函数并需要更新选择选项

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

答案 15 :(得分：2)

尝试这个新的

确切地说它会起作用

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

答案 16 :(得分：1)

$('select').val('the_value');看起来是正确的解决方案，如果你有数据表行，那么：

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

答案 17 :(得分：1)

感谢您的提问。希望这段代码能为你效劳。

class Class1
    def initialize
       #instance method
       puts self.class.edit
    end

    def self.edit
       #class method
       "ha"
    end
end

c= Class1.new

答案 18 :(得分：1)

如果你不想使用jQuery，你可以使用下面的代码：

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

答案 19 :(得分：0)

  

$（'＃select option [data-id-estado =“ 3”]'）。prop（“ selected”，   true）.trigger（“ change”）;

或

  

$（'＃select option [value =“ myValue”]'）。prop（“ selected”，   true）.trigger（“ change”）;

答案 20 :(得分：0)

有一些建议，为什么您应该使用prop而不是attr.一定要使用prop，因为我已经测试过两者，attr会给您带来奇怪的结果，除了最简单的情况。

我想要一个解决方案，可以从任意分组的select选项中自动选择同一页面上的另一个select输入。例如，如果您有2个下拉菜单-一个下拉菜单中的国家/地区，另一个下拉菜单中的大洲/地区。在这种情况下，选择任何国家都会在另一个大陆下拉列表中自动选择该国家的大陆。

$("#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>

如代码片段所示，prop每次都能正常工作，但是一旦选择了一次选项，attr就无法正确选择。

关键点：：我们通常对属性的属性感兴趣，因此在大多数情况下使用prop比attr更安全。

相关问题
最新问题