本文总结浏览器原生下拉选择控件select
的基本用法。
HTML
部分:
<select id="shopType">
<option value="0" selected>请选择</option>
<option value="1">罗森</option>
<option value="2">美宜佳</option>
<option value="3">天福</option>
<option value="4">红旗</option>
<option value="5">联华快客</option>
<option value="6">其他(请填写)</option>
</select>
onchange
事件
window.Q = function (idStr) {
return document.getElementById(idStr);
};
Q('shopType').onchange = function() {
var val = this.value;
console.log(val);//被选中option中的value属性值
};
其他js
操作:
Q('shopType').value;//获取被选中option中的value属性值
Q('shopType').value = 3;//通过value属性值的匹配,来设置被选中的option
Q('shopType').options;//获取其中,所有option的列表
Q('shopType').selectedIndex;//被选中option在列表中的下标位置,从0开始
var sel = Q('shopType');
var opt = sel.options[sel.selectedIndex];//获取被选中的option
opt.text;//获取被选中option中的text部分
opt.innerText;//获取被选中option中的text部分