利用js给select添加option并选中该option

本文介绍了一种使用JavaScript动态向HTML的<select>元素中添加<option>的方法,并演示了如何读取用户选择的值。通过具体示例代码展示了在按钮点击事件中触发添加选项及获取选中值的过程。
<script>
function addOptionToSelect()
{
   var slt=document.getElementById("slt");
   var objOption=document.createElement("OPTION");
   objOption.value='6';
   objOption.text='content';
   slt.add(objOption);
   alert(slt.options.length);
   slt.options[slt.options.length-1].selected='selected';
}
function getvalue()
{
   var slt=document.getElementById("slt");
   alert(slt.value);
}
</script>
<input type="button" value="add option" onclick="addOptionToSelect()">
<br>
<select id="slt">
<option value='1'>aaaa</option>
<option value='2'>bbbb</option>
<option value='3'>cccc</option>
<option value='4'>dddd</option>
<option value='5'>eeee</option>
</select>
<br>
<input type="button" value="get value" onclick="getvalue()">
可以通过多种方式实现 JavaScript 设置 `select` 下拉框默认选中某个 `option`,具体方法取决于需求是基于 `value` 值选中,还是基于 `text` 文本选中。 ### 基于 value 设置默认选中 如果已知 `option` 的 `value` 值,可以使用以下方式设置默认选中项: ```javascript // 方法一:使用 .val() 方法 $("#selectExample").val('1'); // 设置 value 为 '1' 的 option 为默认选中 [^2] // 方法二:使用 .prop() 方法 $("#selectExample option[value='1']").prop("selected", true); // 设置 value 为 '1' 的 option 为默认选中 [^2] // 方法三:原生 JavaScript document.getElementById("selectExample").value = "1"; // 设置 value 为 '1' 的 option 为默认选中 ``` ### 基于 text 设置默认选中 如果只知道 `option` 的显示文本(即 `text`),而不是 `value`,则可以通过遍历 `option` 元素进行匹配: ```javascript var selected = "上海"; // 需要选中的文本 $("#selectExample").find("option").each(function () { if ($(this).text() === selected) { $(this).prop("selected", true); // 设置 text 为 "上海" 的 option 为默认选中 } }); ``` ### 使用 jQuery 设置默认选中 jQuery 提供了便捷的方法来操作 `select` 和 `option` 元素,如 `.val()` 和 `.prop()`,它们可以快速设置选中状态。 ```javascript // 通过 value 设置选中 $("#sel").val('2'); // 设置 value 为 '2' 的 option 为默认选中 [^3] // 通过 text 设置选中 var selected = "锤子"; $("#sel").find("option").each(function () { if ($(this).text() === selected) { $(this).prop("selected", true); // 设置 text 为 "锤子" 的 option 为默认选中 [^3] } }); ``` ### 原生 JavaScript 设置默认选中 如果不使用 jQuery,也可以通过原生 JavaScript 实现相同功能: ```javascript // 通过 value 设置默认选中 var selectElement = document.getElementById("selectExample"); selectElement.value = "2"; // 设置 value 为 '2' 的 option 为默认选中 [^5] // 通过 text 设置默认选中 var selectedText = "bbb"; for (var i = 0; i < selectElement.options.length; i++) { if (selectElement.options[i].text === selectedText) { selectElement.selectedIndex = i; // 设置 text 为 "bbb" 的 option 为默认选中 break; } } ``` ### 总结 无论使用 jQuery 还是原生 JavaScript,都可以通过 `value` 或 `text` 来设置 `select` 下拉框的默认选中项。选择合适的方法取决于具体需求和开发环境。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值