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

Question

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

使用此代码:

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

具有该值的选项获取属性"已选中"(在Firebug中选中),但选择字段仍显示"选择"(初始)选项.

设置值后,我尝试做焦点和模糊,但这也不起作用.

有什么建议？

---

这几乎是标准形式:

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

但文本是选择保持"选择".如果我提交表单,则值正确传递.

如果我重置表单并选择一些选项,则正确显示所选选项的文本.这对我来说很奇怪.

Answer 1

我找到了解决方案.我忘了给改变事件打电话.我不知道jQuery不会自动执行此操作.所以解决方案的代码是:

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

Answer 2

我在下拉html标签时遇到了同样的问题.并得到了解决方案.我在下面分享使用.change(),. attr()和.prop()时的分析.

1. .change() :当我使用.change()不能在我的情况下工作,所以它不可靠.浏览器版本问题.
2. .attr() :当我使用.attr()方法/函数时,例如. $('#db_service option[value=1]').attr('selected', 'selected'); 分析:当我看到源代码时,它将select tag选项的属性设置为selected = selected.但是在屏幕上没有出现变化.
3. .prop() :当我使用.prop()方法/函数时,例如. $('#db_service option[value=1]').prop('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()

Answer 3

正在'#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