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

I want to change drop down menu text of select tag automatically by javascript

本文关键字：选择 标签 文本 下拉菜单 javascript      更新时间：2023-09-26
<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，而不需要实际进入下拉菜单并选择它

可以这样写:

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

也就是说，使用document.getElementById()来获取对按钮的引用(假设它有一个id -如果没有，就给它一个)，然后使用addEventListener()方法添加一个click处理程序，该处理程序设置select元素的.value属性。

请注意，上面的代码需要放在按钮后面的脚本元素中，和/或在document ready/onload处理程序中。

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

我们可以使用jQuery来设置你的select标签的值，当一个特定的按钮被按下。假设你有一些button和id "enterLbs":

<button id="enterLbs">Set to lbs.</button>
使用jQuery，我们可以选择这个按钮，并将事件处理程序绑定到按钮的click事件。在本例中，当按钮被点击时，我们希望将select的值(id"weight-unit")设置为"lbs": 
$("#enterLbs").click(function() {
    $("#weight-unit").val("lbs");
});

因此，当按下带有id"enterLbs"的button时，带有id"weight-unit"的select的值设为lbs。考虑下面的工作示例:http://jsfiddle.net/u2p9npt5/.

如果你不想使用jQuery，你可以使用JavaScript的document.getElementById函数添加一个事件处理程序到button与id "enterLbs ":

var button = document.getElementById("enterLbs");
var select = document.getElementById("weight-unit");
button.addEventListener("click", function() {
    select.value = "lbs";
});

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

相关文章：