JQuery - 如何根据值选择下拉框的选项

Question

我想根据输入的值来设置一个下拉菜单（select）的更改。

我有：

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

我知道我想改变下拉菜单，使值为"fg"的选项被选中。如何使用 JQuery 实现？

- Mark W

---

我以为很简单，但似乎不起作用。我猜现在是调试时间了。 - Mark W

可能是使用jQuery按文本内容选择选项的重复问题。 - Christopher

你的标题有点误导人。你并不是在选择一个下拉菜单，而是在选择下拉菜单中的一个选项......这就是为什么有7个答案对我没有任何帮助的原因... - user1566694

如果你想要更加专业一些，它实际上不叫做下拉菜单，而是“选择框”。 - Mark W

Answer 1

你应该使用

$('#dropdownid').val('selectedvalue');

这里是一个例子：

$('#dropdownid').val('selectedvalue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>

- Jeaf Gilbert

---

同意上述观点。根据你的代码，应该这样写：$('#mySelect option[value="fg"]').attr('selected', true)。 - Martavis P.

我的错误，我曾看到它在某些情况下无法工作，但在这个演示中它明显可以。 - Martavis P.

我只是想小心一点。它不会触发<select>标签上的“change”事件。如果您没有使用该事件，那么这很好。 - Chad Fisher

如果您正在使用更改事件，请使用$('#dropdownid').val('selectedvalue').trigger('change');来触发它。 - Liam

确实触发器变化对于在编写某些后续代码以执行特定操作（如模型更新）时非常有帮助，即使ASP.net视图模型更新也发生在DD的更改事件上。+1 - Mantra

我做错了什么吗？我在控制台中输入 $('#dropdownid').val('1');，然后只返回以下内容：Object { context: HTMLDocument https://dev59.com/HWoy5IYBdhLWcg3wJKzR, selector: "#dropdownid" } - Qrow Saki

Answer 2

$('#yourdropddownid').val('fg');

可选地，

$('select>option:eq(3)').attr('selected', true);

这里的3是你想要的选项的索引。

实时演示

- Ayush

Answer 3

$('#mySelect').val('fg');...........

- Royi Namir

Answer 4

 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");

- Abdo-Host

---

如果您正在使用select2插件，则可以使用以下代码：$('#mySelect').val('ab').trigger("change"); - Vaibhav Jain

.change() 帮助我更新了我的 ASP.net MVC 模型属性。感谢您的答案。 - Mantra

谢谢... .trigger('change') 完美运行！ - LUISAO

Answer 5

你可以使用这段jQuery代码，我觉得它更易于使用：

您可以使用此jQuery代码，我发现它更容易使用：

$('#your_id [value=3]').attr('selected', 'true');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>

- Sky

Answer 6

您可以简单地使用：

$('#select_id').val('fg')

- Dagang

Answer 7

在你的情况下，$("#mySelect").val("fg") :)

- Kamran Ahmed

Answer 8

$('#dropdownid').val('selectedvalue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>

- Siddhartha

Answer 9

也许已经晚了，但至少会有人得到帮助。

您可以尝试以下两个选项：

当您想基于索引值进行分配时，此结果将显示“0”为索引。

 $('#mySelect').prop('selectedIndex', 0);

不要使用 'attr'，因为它在最新的jquery中已被弃用。

当您想根据选项值进行选择时，请选择以下内容：

 $('#mySelect').val('fg');

其中'fg'是选项值

- Manjuboyz

---

基于索引的选择很少使用，但是在您编写了一些通用代码以设置下拉菜单，而不同 DD 的值有所变化的情况下，这是一个很好的选择。谢谢 :)。 - Mantra

Answer 10

这段代码对我来说有效：

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

使用这个HTML选择列表：

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>

- Nole