jquery js处理select元素选择change事件

 在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'); // 定位id
        var 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>