按 ID 更改选定的下拉列表答案

【问题标题】：Change selected dropdown by ID按 ID 更改选定的下拉列表
【发布时间】：2012-11-30 15:30:55
【问题描述】：

我已经看到您可以按值更改选定的下拉项，但我想通过选项 ID 进行更改，因为这些值是动态创建的。我正在创建一个带有下拉菜单、问题部分和上一个/下一个按钮的问卷。下拉列表的值是在 php 数组中动态创建的。

我的设置方式是这样的：

<select id="myDropdown">
    <option id="1" value="dynamicallycreated1"></option>
    <option id="2" value="dynamicallycreated2"></option>
    <option id="3" value="dynamicallycreated3"></option>
</select>

选择是通过 php 创建的，以数组的索引作为 ID。页面上有上一个/下一个按钮可以从一个部分向后/向前移动。当用户单击下一个或上一个按钮时，我希望下拉菜单更改为适当的项目。我可以通过当前的 javascript 轻松获取索引，那么如何使用此索引作为 ID 更改下拉列表？谢谢！

【问题讨论】：

显然，不要使用 1,2,3 作为您的 ID。这是无效的。
如上所述，以数字开头的id 是无效的 HTML。但是为什么还要为此创建id's 呢？您可以使用 jQuery 通过 index (0, 1, 2...) 访问 option 项目。
谢谢大家，忘记以数字开头的 id 无效。整理好了。

标签： php javascript jquery

【解决方案1】：

在 JavaScript 中，只需将 selected 属性设置为 true：

var opt = document.getElementById("1");
opt.selected = true;

经过测试并与 Firefox 配合使用。

使用 jQuery，它将是：

$("#1").prop('selected', true);

【讨论】：

@azizpunjani 你能帮我吗？我没有太多 jQuery 经验。
$("#1").prop('selected', true )
太棒了...除了一件事...以数字开头的id 是无效的 HTML，因此无论如何它可能不会非常可靠地工作。
我发现 array-version 也可以，但这看起来要好一些。我同意 id 的事情，但这很容易用前缀来解决。
前导数字 id 在 html5 中有效。

【解决方案2】：

我同意 Lee Taylor 的观点，即您不应使用 1、2、3 作为 ID 字段。您可以在下拉列表的value 属性中使用这些值，例如

并使用 jquery 选择 value = 1 like 的元素

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

【讨论】：

【解决方案3】：

忘记为您的option 项目创建任何特殊的id 或更改值。只需使用 jQuery 获取index。（请注意，索引从0 开始，因此如果需要，只需将1 添加到此结果中。）

$('#myDropdown').find('option:selected').index();

HTML：

<select id="myDropdown">
    <option value="dynamicallycreated1">option one</option>
    <option value="dynamicallycreated2">option two</option>
    <option value="dynamicallycreated3">option three</option>
</select>

【讨论】：