select中value、text的赋值、回显（修改的时候会用到）

最新推荐文章于 2023-11-11 19:11:03 发布

原创最新推荐文章于 2023-11-11 19:11:03 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

22 篇文章

订阅专栏

本文介绍使用JavaScript来控制HTML中下拉选择框（select元素）的选中项，包括三种设置选中项的方法：通过selectedIndex属性、直接设置option的selected属性以及通过更改select元素的value属性。

var sel = document.getElementById('productType21');
sel.options[sel.options.length] = new Option(select.xtype,select.xtypeId);

下拉框回显修改时
var sel = $("#tuijian1")[0];// 大类

$("#tuijian1").find("option:selected").text();

for ( var i = 0; i < sel.length; i++) {
if (sel[i].text == select.productRecomme) {
sel.selectedIndex = i;
}

}

清空select

var sel = document.getElementById('productType21');
sel.length = 0;

用js控制selected
第一种方法：
<form name="aaa">
<SELECT name="j_tsryj">
<OPTION value="1">满意</OPTION>
<OPTION value="2">不满意</OPTION>
<OPTION value="3">其他</OPTION>
<OPTION value="4">其他1</OPTION>
<OPTION value="5">其他2</OPTION>
<OPTION value="6">其他3</OPTION>
</SELECT>
<form>
<script>
aaa.j_tsryj.selectedIndex="4";//显示第5个option
</script>

第二种方法：
<form name="aaa">
<SELECT name="j_tsryj" id="t">
<OPTION value="1">满意</OPTION>
<OPTION value="2">不满意</OPTION>
<OPTION value="3">其他</OPTION>
<OPTION value="4">其他1</OPTION>
<OPTION value="5">其他2</OPTION>
<OPTION value="6">其他3</OPTION>
</SELECT>
<form>
<script>
document.getElementById("t").options[1].selected=true;//显示第2个
</script>

第三种方法：
<form name="bbb">
<SELECT name="j_tsryj" id="t">
<OPTION value="1">满意</OPTION>
<OPTION value="2">不满意</OPTION>
<OPTION value="3">其他</OPTION>
<OPTION value="4">其他1</OPTION>
<OPTION value="5">其他2</OPTION>
<OPTION value="6">其他3</OPTION>
</SELECT>
<form>
<script>
document.getElementById("t").value="6";//显示最后一个
</script>