Question

<select id="weight-unit" class="styled" name="weight-unit" data-placeholder="kg&nbsp;">
                        <option value="" selected></option>
                        <option  class="kg"  value="kg" id="kg" name="kg" >kg</option>
                        <option  class="lbs" value="lbs" id="lbs">lbs</option>
                    </select>

当用户点击按钮时，我希望下拉菜单自动显示lbs，而不会实际进入下拉菜单并选择它。

Answer 1

也许有点像这样：

document.getElementById("idOfYourButton").addEventListener("click", function() {
    document.getElementById("weight-unit").value = "lbs";
}, false);

也就是说，使用document.getElementById()获取对按钮的引用（假设它有一个id - 如果没有，给它一个），然后使用addEventListener() method添加一个设置<元素的.value属性。

请注意，上面的代码需要位于按钮之后的脚本元素中，和/或文档就绪/ onload处理程序中。

演示：http://jsfiddle.net/pan4ftn9/

Answer 2

我们可以使用jQuery在按下特定按钮时设置select标记的值。假设您有一些button id“enterLbs”：

<button id="enterLbs">Set to lbs.</button>

使用jQuery，我们可以选择此按钮并将事件处理程序绑定到按钮的click事件。在这种情况下，单击按钮时，我们要将select（id“权重单位”）的值设置为“lbs”：

$("#enterLbs").click(function() {
    $("#weight-unit").val("lbs");
});

因此，当按下button id“enterLbs”时，select id“权重单位”的值设置为{{1} }。请考虑以下工作示例：http://jsfiddle.net/u2p9npt5/。

如果您不想使用jQuery，可以使用JavaScript的lbs函数向document.getElementById添加事件处理程序button“enterLbs```：

id

如果你不想使用jQuery，请考虑这个jsfiddle：http://jsfiddle.net/c51gsp1L/。

我想通过javascript自动更改select标签的下拉菜单文本

2 个答案: