Question

怎么动态设置select标签中option选项的selected属性

Answer 1

通过for循环判断每个选项，一旦满足条件则设置其selected属性为true即可，关键代码： 

下面给出实例演示：

1、HTML结构

2、javascript代码

3、设置效果：如图设置选中项为2，点击按钮后“赵云”即被选中。

扩展资料：

selected 定义和用法

selected 属性规定在页面加载时预先选定该选项。

被预选的选项会显示在下拉列表最前面的位置。

也可以在页面加载后通过 JavaScript 设置 selected 属性。

参考资料：百度百科JS

Answer 2

思路：通过for循环判断每个选项，一旦满足条件则设置其selected属性为true即可，关键代码：

1
2
3
4
5

obj = document.getElementById(select_id);
for(i=0;i<obj.length;i++){
if(obj[i].value == something)
obj[i].selected = true;
}

下面给出实例演示：
1、HTML结构

1
2
3
4
5
6
7
8
9

<select id="test">
<option selected value="0">- 请选择 -</option>
<option value="1"><a href="https://www.baidu.com/s?wd=%E5%85%B3%E7%BE%BD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YdnHb1nWn1Pjf1mhn1rH9h0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHn1PHR3njf4" target="_blank" class="baidu-highlight">关羽</a></option>
<option value="2"><a href="https://www.baidu.com/s?wd=%E8%B5%B5%E4%BA%91&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YdnHb1nWn1Pjf1mhn1rH9h0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHn1PHR3njf4" target="_blank" class="baidu-highlight">赵云</a></option>
<option value="3"><a href="https://www.baidu.com/s?wd=%E9%A9%AC%E8%B6%85&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YdnHb1nWn1Pjf1mhn1rH9h0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHn1PHR3njf4" target="_blank" class="baidu-highlight">马超</a></option>
<option value="4"><a href="https://www.baidu.com/s?wd=%E9%BB%84%E5%BF%A0&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YdnHb1nWn1Pjf1mhn1rH9h0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHn1PHR3njf4" target="_blank" class="baidu-highlight">黄忠</a></option>
<option value="5"><a href="https://www.baidu.com/s?wd=%E5%BC%A0%E9%A3%9E&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YdnHb1nWn1Pjf1mhn1rH9h0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHn1PHR3njf4" target="_blank" class="baidu-highlight">张飞</a></option>
</select>
<input type="text" id="sel_text"/><input type='button' value='设置选项' onclick="fun()"/>

2、javascript代码

1
2
3
4
5
6
7
8

function fun(){
str = document.getElementById("sel_text").value;
obj = document.getElementById("test");
for(i=0;i<obj.length;i++){
if(obj[i].value==str)
obj[i].selected = true;
}
}