Question

我的每一行都有一个带下拉列表的网格，我需要从DB渲染它的状态。因此，我已经定义了下拉列表，其中选择了指定用于从DB中选择值的选项。

<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()方法以进行选择。

E.g $('#selectId').val('1');会将第一个选项设置为已选中，然后调用$('#selectId').val()会向您1而不是2。

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

Answer 3

您正在尝试使用哪种浏览器？您的代码对我来说很好，并且似乎在this jsFiddle中工作。

Answer 4

您可以获取所选选项的val，而不是选择

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

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

Answer 5

请改用此代码，

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

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

5 个答案: