浏览器原生select使用总结

本文总结浏览器原生下拉选择控件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部分