HTML SELECT - 使用 JavaScript 按 VALUE 更改所选选项答案

【问题标题】：HTML SELECT - Change selected option by VALUE using JavaScriptHTML SELECT - 使用 JavaScript 按 VALUE 更改所选选项
【发布时间】：2012-08-29 05:42:27
【问题描述】：

SELECT 下拉菜单中可以有很多选项。

<select id="sel">
    <option value="car">1</option>
    <option value="bike">2</option>
    <option value="cycle">3</option>
    ...
</select>

我正在创建一个更新个人资料页面，从数据库中检索用户的个人资料并显示带有这些值的表单。谈到SELECTdropdown，有很多选择。所以，它繁琐的测试所有值

if (value == '1')
    echo "<option selected value='car'>1</option>";`

所以，我想从其值中选择相应的选项。就像当我使用 JavaScript 执行 sel.value = 'bike' 之类的操作时，应该选择选项 2。

【问题讨论】：

您确定是value="car" 并且文本是1，而不是相反吗？ <select> 代码是静态的，还是从数据库等动态创建的？
你想在服务器端选择这个？为什么没有服务器端标签？

标签： javascript html html-select

【解决方案1】：

您可以使用 javascript 选择值：

document.getElementById('sel').value = 'bike';

DEMO

【讨论】：

记住：你可以使用 sel.value = 'bike' 而不是 document.getElementById('sel').value
@EduardoXavier，如果您首先运行 'var sel = document.getElementById('sel');'，那么可以。否则，不，你不能。如果元素只有id，唯一的办法就是先获取元素。但是，如果它具有name 属性并且在表单中，则可以使用formelement.sel.value。 w3.org/TR/html5/forms.html#the-form-element 和 w3.org/TR/html5/forms.html#dom-form-nameditem
@DenilsonSá 这个问题是关于“id”的使用。您所说的形式和名称是正确的，但是当您说我无法以我建议的方式访问元素时，您完全错了。那么让我们做一些练习，看看这里jsfiddle.net/tub6f0Lg：P欢呼！
@EduardoXavier：我的立场是正确的，你是对的！感谢您指出！ :) w3.org/TR/html5/browsers.html#named-access-on-the-window-object 但是，虽然很方便，但由于 window 对象而依赖 ID 作为全局变量可能会导致代码混乱和不可读。考虑另一位开发人员（甚至可能是您自己）阅读代码。
javascriptstutorial.com/blog/…

【解决方案2】：

如果你使用的是 jQuery：

$('#sel').val('bike');

【讨论】：

【解决方案3】：

试试这个....

JSFIDDEL DEMO

使用javascript

document.getElementById('sel').value = 'car';

使用 jQuery

$('#sel').val('car');

【讨论】：

【解决方案4】：

document.getElementById('drpSelectSourceLibrary').value = 'Seven';

【讨论】：