使用 jQuery select 更改它不会显示选定的选项

Changing it with jQuery select doesn't show selected option

提问by Jovica

I have hidden form with a few select fields and some input fields. Click on button should show that form and set some values in the fields. The input fields are filled with given values but I have problem with select fields.

我隐藏了一些选择字段和一些输入字段的表单。单击按钮应显示该表单并在字段中设置一些值。输入字段填充了给定的值，但我在选择字段时遇到问题。

Using this code:

使用此代码：

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

option with that value gets attribute "selected" (checked in Firebug) but select field still shows "Choose" (initial) option.

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

I tried to do focus and blur after setting value but that didn't work either.

我尝试在设置值后进行对焦和模糊，但这也不起作用。

Any suggestions?

有什么建议？

---

---

This is pretty much the standard form:

这几乎是标准形式：

<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>

And by calling jQuery statement:

并通过调用 jQuery 语句：

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

I get this in Firebug:

我在 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>

but the text is select stays "Choose". If I submit form, the value is correctly passed.

但文本是选择保持“选择”。如果我提交表单，则正确传递该值。

Than if I reset the form and select some option the text of selected option is shown properly. That's what's weird to me.

如果我重置表单并选择某个选项，则所选选项的文本会正确显示。这就是我的奇怪之处。

回答by Jovica

I found a solution. I forgot to call change event for . I didn't know that jQuery doesn't do it automatically. So the code for solution is:

我找到了解决方案。我忘记为 调用更改事件。我不知道 jQuery 不会自动执行。所以解决方案的代码是：

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

回答by Naisarg Parmar

I was having the same problem with dropdown html tag. And got the solution. What I analysis during using .change(), .attr() and .prop() is shared below.

我在使用dropdown html tag时遇到了同样的问题。并得到了解决方案。下面分享我在使用 .change()、.attr() 和 .prop() 期间分析的内容。

1. .change(): When I used .change()wont work in my case, so it is not reliable. Also Browser version issue.
2. .attr(): When I used .attr()method/function, for eg. $('#db_service option[value=1]').attr('selected', 'selected');Analysis:It set attribute of select tag's option to selected=selected when i saw source code. But on screen changes are NOT Appeared.
3. .prop(): When I used .prop()method/function, for eg. $('#db_service option[value=1]').prop('selected', 'selected');Analysis:It WONT set attribute of select tag's option to selected=selected when i saw source code. But on screen, changes are APPEARED.

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');分析：当我看到源代码时，它不会将 select 标签选项的属性设置为 selected=selected。但是在屏幕上，变化出现了。

My Solution:Used both .attr() and .prop() for more perfect result

我的解决方案：同时使用 .attr() 和 .prop() 以获得更完美的结果

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

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

回答by mpoletto

I had the same problem. At http://api.jquery.com/attr/, there are some notes about .prop() method instead .attr(). Also, like Jovica's answer, changed option only appears in Firefox (20.0 is my version) if we use the .change() method at the end.

我有同样的问题。在http://api.jquery.com/attr/ 上，有一些关于 .prop() 方法而不是 .attr() 的注释。此外，就像 Jovica 的回答一样，如果我们在最后使用 .change() 方法，则更改选项仅出现在 Firefox（20.0 是我的版本）中。

回答by Tha boudj

I had the same issue, I was trying to change the selected option of a select in a form that was hidden.

我遇到了同样的问题，我试图在隐藏的表单中更改选择的选定选项。

The .attr(attribute, value)wasn't working as the displayed option was not showing up even the selected attribute was correctly updated. The .prop(property,value)did the trick.

在.attr(attribute, value)不工作作为所显示的选项中没有显示出来，即使选择的属性是正确更新。该.prop(property,value)做的伎俩。

回答by noobmaster007

I wanted to mention that I tried everything here and only adding the following line just above $("#form select[name=user]").val(value);worked for me:

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

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

回答by Damien-Wright

the '#form select[name=user]'is trying to choose a <select name="user">element that is the child of an element with the id of "form"... eg:

在'#form select[name=user]'试图选择一个<select name="user">元素是与“形式”的ID ......如一个元素的孩子：

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

I believe you want the following:

我相信你想要以下内容：

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

That should now choose a <select name="user">element that is the child of a form, eg:

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

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