我有以下的HTMLJQuery的选择列表上设置所选属性

<select id="dropdown"> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
</select>

我有串“B”，所以我想在其上设置选择attrribute所以这将是：

<select id="dropdown"> 
    <option>A</option> 
    <option selected="selected">B</option> 
    <option>C</option> 
</select>

我如何在JQuery中做到这一点？

来源

2009-08-21 Rupert

105

如果你不介意修改您的HTML一点点包括的选项value属性，可以显著所需的代码减少做到这一点：

<option>B</option>

到

<option value="B">B</option>

这将是有益的，当你想要做的是这样的：如果你决定不包括使用

$("select option[value='B']").attr("selected","selected");

：

<option value="IL">Illinois</option>

随即，遵循jQuery将做出改变value属性，您将被要求遍历每个选项，并手动检查其值：

$("select option").each(function(){ 
    if ($(this).text() == "B") 
    $(this).attr("selected","selected"); 
});

来源

2009-08-21 11:06:05 Sampson

+14

添加'value'属性后，选择也可以这样完成：'$（“＃下拉”）.val（“B”）;' – 2009-11-25 09:09:38

+1 - 这正是我所期待的。还有，+1 @jorn – Jason 2010-01-22 01:49:56

嗨* @乔纳森桑普森*：很好的解决方案。所有其他的东西建议设置.val（），但这似乎并没有为我工作。 – MikeSchinkel 2010-09-17 02:27:41

您可以使用纯DOM。见http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

document.getElementById('dropdown').selectedIndex = 1;

但jQuery的可以帮助：

$('#dropdown').selectedIndex = 1;

来源

2009-08-21 11:00:33

这假设你知道哪个元件具有所需的值。当列表动态生成时，情况并非总是如此。 – tvanfosson 2009-08-21 11:01:45

我会通过选项进行迭代，文本比较什么，我要选择，然后设置该选项的选择属性。一旦你找到了正确的，终止迭代（除非你有多选）。沿线的

$('#dropdown').find('option').each(function() { 
     var $this = $(this); 
     if ($this.text() == 'B') { 
     $this.attr('selected','selected'); 
     return false; 
     } 
});

来源

2009-08-21 11:00:44 tvanfosson

是否有理由使用.find（）而不是$（'＃下拉选项）？更高效？ “VAR $这”的东西也看起来不对我... – 2009-08-21 11:08:48

我认为差异主要是文体。在引擎盖下，我希望他们的操作方式基本相同。获取一个集合，过滤它。我已经开始使用$ this来持有对jQuery对象的引用。我也看到了自我（或自我），但我认为这并不清楚。 – tvanfosson 2009-08-21 13:34:03

东西...

$('select option:nth(1)').attr("selected","selected");

来源

2009-08-21 11:01:59 David

代码：

var select = function(dropdown, selectedValue) { 
    var options = $(dropdown).find("option"); 
    var matches = $.grep(options, 
     function(n) { return $(n).text() == selectedValue; }); 
    $(matches).attr("selected", "selected"); 
};

例子：

select("#dropdown", "B");

来源

2009-08-21 11:41:44

<select id="cars"> 
<option value='volvo'>volvo</option> 
<option value='bmw'>bmw</option> 
<option value='fiat'>fiat</option> 
</select> 

var make = "fiat"; 

$("#cars option[value='" + make + "']").attr("selected","selected");

来源

2010-12-21 13:50:46

您可以按照danielrmt的.selectedIndex策略，但决定基于这样的选项标签内的文本索引：

$('#dropdown')[0].selectedIndex = $('#dropdown option').toArray().map(jQuery.text).indexOf('B');

这适用于原始HTML而不使用值属性。

来源

2012-04-27 01:05:10

$('#select_id option:eq(0)').prop('selected', 'selected');

其良好的

来源

2014-02-02 15:28:37 Mikulasche

如果您正在使用JQuery的，因为你1.6必须使用。丙（）方法：

$('select option:nth(1)').prop("selected","selected");

来源

2015-09-25 14:16:38

这可以是一个溶液

$(document).on('change', 'select', function() { 
      var value = $(this).val(); 
      $(this).find('option[value="' + value + '"]').attr("selected", "selected"); 
     })

来源

2016-12-04 07:19:36 Regan

JQuery的选择列表上设置所选属性

回答

这可以是一个溶液

相关问题