在html页面中，select元素是我们经常使用的标签元素。本文介绍如何使用原生 js 和 jquery 设置select的默认选中项，以及select的选择事件处理。
准备工作：
1. 代码：
<form><label>城市：</label><select id="city" name="city"><option value="">请选择</option><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option><option value="4">杭州</option></select> </form>
2. jquery引入
如果使用jquery，请通过script标签，引入jquery
一、设置select元素默认的选中项
1.1 使用原生js方法，代码如下：
<script> // js 设置默认的选中项（选中索引为2的option）document.getElementById('city').selectedIndex = 2;
</script>
1.2 使用jquery方法，代码如下：
<script> // jquery 设置默认的选中项（选中索引为2的option）$("select[name=city]").get(0).selectedIndex = 2;
</script
二、处理select选择change事件
2.1 使用原生js方法，代码如下（注意select元素的属性onchange）：
<form><label>城市：</label><select id="city" name="city" οnchange="handleChange()"><option value="">请选择</option><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option><option value="4">杭州</option></select>
</form>
<script>// js 处理select选择change事件function handleChange() {var obj = document.getElementById('city'); // 定位idvar index = obj.selectedIndex; // 选中索引var value = obj.options[index].value; // 选中值alert(value);}
</script>
2.2 使用jquery方法，代码如下（注意select元素不需要设置onchange属性）：
<form><label>城市：</label><select id="city" name="city"><option value="">请选择</option><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option><option value="4">杭州</option></select>
</form>
<script>// jquery 处理select选择change事件$("#city").on("change", function () {alert($("#city").val());});
</script>