【问题标题】：Setting the selected attribute on a select list using jQuery使用 jQuery 在选择列表上设置 selected 属性
【发布时间】：2018-08-08 21:53:05
【问题描述】：

我有以下 HTML：

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

我有字符串“B”，所以我想在它上面设置selected 属性，所以它会是：

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

我将如何在 jQuery 中做到这一点？

【问题讨论】：

标签： jquery html html-select

【解决方案1】：

如果您不介意稍微修改您的 HTML 以包含选项的 value 属性，您可以显着减少执行此操作所需的代码：

<option>B</option>

到

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

当您想要执行以下操作时，这将很有帮助：

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

这样，follow jQuery 就会做出改变：

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

如果您决定不包括使用value 属性，您将需要循环浏览每个选项，并手动检查其值：

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

【讨论】：

添加value属性后，也可以这样选择：$("#dropdown").val("B");
设置.val() 不会调用绑定到<select> 的.change() 事件。只是说...
如果你想触发绑定到你的选择的.change()事件，你可以使用$(this).change()
@madtyn $.fn.prop 直到 2011 年才被添加。这个答案早几年。此外，虽然不是我的意图，但通过更改属性，您可以通过属性选择器更好地控制样式。
.val() 和 .prop() 不要更改/设置属性。但这种行为在某些情况下是必需的，并且只能使用 .attr() jsfiddle.net/6sebLnrz

【解决方案2】：

<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");

【讨论】：

【解决方案3】：

如果你使用的是 JQuery，从 1.6 开始你必须使用 .prop() 方法：

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

【讨论】：

这个解决方案是最好的。 .attr() 不允许多次更改。 .prop() 确实如此。

【解决方案4】：

我会遍历选项，将文本与我想要选择的内容进行比较，然后在该选项上设置 selected 属性。一旦你找到正确的，终止迭代（除非你有一个多选）。

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

【讨论】：

是否有理由使用 .find() 而不是 $('#dropdown option')？更高效？ “var $this” 的东西在我看来也是不对的……
我认为区别主要在于风格。在引擎盖下，我希望它们以基本相同的方式运行。获取一个集合，过滤它。我已经开始使用 $this 作为保存对 jQuery 对象的引用的一种方式。我也见过 self（或 $self），但我认为这不太清楚。

【解决方案5】：

您可以遵循 danielrmt 的 .selectedIndex 策略，但根据选项标签内的文本确定索引，如下所示：

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

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

【讨论】：

【解决方案6】：

这可能是一个解决方案

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

【讨论】：

【解决方案7】：

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

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

但 jQuery 可以提供帮助：

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

【讨论】：

这假定您知道哪个元素具有所需的值。动态生成列表时，情况并非总是如此。

【解决方案8】：

代码：

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");

【讨论】：

【解决方案9】：

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

不错

【讨论】：

【解决方案10】：

类似于...的东西

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

【讨论】：