使用jQuery在选择列表上设置所选属性

Question

我有以下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中执行此操作？

Answer 1

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

<option>B</option>

到

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

当您想要执行以下操作时，这将非常有用：

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

有了这个，后面的jQuery将进行更改：

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

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

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

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

Answer 3

如果你使用的是JQuery，那么你需要使用.prop（）方法：

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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

但jQuery可以提供帮助：

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

Answer 7

代码：

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

Answer 8

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

很好

Answer 9

这可以是一个解决方案

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

Answer 10

有些事情......

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