如何使用预选值初始化下拉列表（<select/>）然后更改它？

Question

我有一个网格，每一行都有下拉菜单，我需要从数据库渲染它的状态。 因此，我定义了下拉列表，并指定了用于从数据库中预选择值的选定选项。

<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>​

问题在于，当我更改浏览器中定义的下拉列表的值时，它会在 UI 上发生变化，但选定的属性不会移动并保持在原来的位置。 因此，当我调用 $("#selectId").val() 时，我会得到旧的值。

初始化下拉控件然后能够在浏览器中或通过 jQuery 自由更改其值的适当方法是什么？

Answer 1

这似乎工作正常（Ubuntu 上的 Firefox）：

HTML

<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>

JS

$('#selectId').change(function() {
    var opt = $(this).find('option:selected');
    console.log([opt.val(), opt.text()]);   
});

var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');

如果您选择这些选项，您将看到它将打印更改后的版本。工作示例：

• http://jsfiddle.net/vm4Q8/

希望这有帮助。

Answer 2

应该可以正常工作。可能是你设置不正确。

您应该将选项的

value

传递给

val()

方法来选择它。

例如

$('#selectId').val('1');

会将第一个选项设置为选定状态，然后调用

$('#selectId').val()

将为您提供

1

而不是

2

。

这是工作示例http://jsfiddle.net/3eu85/

Answer 3

可以获取选中选项的val，而不是select

$('select#selectId option:selected').val(); 

文档：http://api.jquery.com/val/

Answer 4

您在哪个浏览器中尝试此操作？你的代码对我来说看起来很好，并且似乎可以在 this jsFiddle 中工作。

Answer 5

请使用此代码，

$('#selectId option:selected').val(); 

Answer 6

<script>
    $(document).ready(function () {
      $('#ta_ingredient').val('2');
    });
</script>