使用jQuery选择器更改选项并没有显示所选选项。

Question

我有一个包含几个选择字段和一些输入字段的隐藏表单，点击按钮应该显示该表单并设置一些字段的值。输入字段填充了给定的值，但是我在选择字段方面遇到了问题。

使用这段代码：

$("#form select[name=user]").val(value);

选项具有该值的属性“selected”（在Firebug中进行检查），但选择字段仍显示“Choose”（初始）选项。

我尝试在设置值后执行焦点和模糊，但也没有起作用。

有什么建议吗？

---

这基本上是标准形式：

<form action="#" id="form" class="fix">
<div class="holder">
    <label>User:</label>
    <select name="user" class="styled">
        <option value="0" selected>Choose</option>
        <option value="1">User 1</option>
        <option value="2">User 2</option>
        </select>
    </div>
</form>

通过调用 jQuery 语句：

$("#form select[name=user]").val('2');
$("#form").show();

我在 Firebug 中看到了这个：

<form action="#" id="form" class="fix" style="display:none">
<div class="holder">
    <label>User:</label>
    <select name="user" class="styled">
        <option value="0">Choose</option>
        <option value="1">User 1</option>
        <option value="2" selected>User 2</option>
        </select>
    </div>
</form>

但是选择的文本仍然是"Choose"。如果我提交表单，值会被正确传递。然后，如果我重置表单并选择某个选项，选择的选项文本就会正确显示。这对我来说很奇怪。

- Jovica

---

它可以与jQuery 1.8.3和1.9.0一起使用。 - profimedica

Answer 1

我找到了一个解决方案。我忘记调用 . 的 change 事件。我不知道 jQuery 不会自动执行这个事件。所以解决方案的代码如下：

$("form select[name=user]").val(value).change();

- Jovica

---

@jovica 花了将近3个小时来解决这个问题，你的答案即使在10年后也帮助了我。谢谢。 :) - Sohil

Answer 2

我遇到了与下拉菜单 html 标签相关的同样问题，最终找到了解决方法。以下是我在使用 .change()、.attr() 和 .prop() 过程中的分析结果：

1. .change()：当我使用.change()时，在我的情况下它无法正常工作，因此不可靠，也有可能是浏览器版本的问题。
2. .attr()：当我使用.attr()方法/函数时，例如： $('#db_service option[value=1]').attr('selected', 'selected'); 分析：它将选项卡的属性设置为 selected=selected，但屏幕上的更改没有出现。
3. .prop()：当我使用.prop()方法/函数时，例如： $('#db_service option[value=1]').prop('selected', 'selected'); 分析：它在我查看源代码时不会将选项卡的属性设置为 selected=selected，但在屏幕上，更改出现了。

我的解决方案： 使用 .attr() 和 .prop() 两种方法可以得到更完美的结果

$('#db_service option[value=1]').attr('selected', 'selected'); $('#db_service option[value=1]').prop('selected', 'selected');
$('#db_service').val("1").change()

- Naisarg Parmar

---

你可以使用序列化将下面的代码合并成一行。 $('#db_service option[value=1]').attr('selected', 'selected'); $('#db_service option[value=1]').prop('selected', 'selected'); - Naisarg Parmar

使用attr和prop解决了我的问题，谢谢（我为这个问题疯狂了）。 - LiefLayer

Answer 3

我也遇到了同样的问题。在 http://api.jquery.com/attr/ 上，有一些关于使用.prop()方法而不是.attr()方法的注释。同时，像Jovica所回答的那样，只有当我们在末尾使用.change()方法时，才会在Firefox中（我的版本是20.0）看到更改后的选项。

- Having a life on a beach

---

感谢提到.prop()方法。我在这里有一个错误，因为我使用的是.attr()而不是.prop()，更改方法后问题得到解决。 - Leonardo Montenegro

Answer 4

我遇到了同样的问题，我试图更改一个表单中被隐藏的下拉列表的选定选项。

由于显示的选项没有显示出来，即使选定属性已经正确更新，因此 .attr(attribute, value) 并没有起作用。而 .prop(property,value) 则解决了这个问题。

- Tha boudj

Answer 5

我想提一下，我尝试了所有方法，只有在$("#form select[name=user]").val(value);上面添加以下行才有效：

$('#form select[name=user]').trigger("updated");

- noobmaster007

Answer 6

你可以使用简单的方法

$(".class_name").val(value).change();

- Siddhartha Mukherjee

Answer 7

'#form select[name=user]' 是在尝试选择一个名为 <select name="user"> 的元素，该元素是具有 id 为 "form" 的父元素的子元素...例如：

<div id="form">
  <select name="user">  // This element

我相信您想要以下内容：

$("form select[name=user]").val(value);

现在应该选择一个位于表单中的子元素 <select name="user">，例如：

<form>
  <select name="user"> //This element

- Damien-Wright

---

我们有两个表单，所以我们使用ID来表示表单。我放置了表单以简化示例。那部分的功能正常工作。 :) - Jovica