WithCoderWithCoderWithCoder

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" onchange="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>


欢迎分享交流,转载请注明出处:WithCoder » jquery js处理select元素选择change事件