jquery笔记：jquery select操作小结

这里先缓存要操作的jquery对象

var $jqForm = $("#jq-form"),    // 获取表单对象
    $jqSel = $("#jq-select"),    // 获取下拉列表对象
    $jqOpts = $jqSel.find("option"),    // 获取选项对象
    $btnReset = $("#btn-reset");    // 获取重置按钮对象

 

一、jquery select 获取当前选项的值、文本

    $jqSel.val();    // 获取当前选项值
    $jqSel[0].selectedIndex;    // 获取当前选项索引，需要将jquery对象转成DOM对象来获取属性值
    $jqOpts.filter(":selected").text();    // 获取当前选项文本

 

二、jquery select 修改选中的选项

    $jqSel.val(3);    // 选中值为3的选项
    $jqSel[0].selectedIndex = 4;    // 选中第五个选项
    
    $jqOpts.prop("selected", false);    // 取消当前选项的选中状态，默认选中第一个选项
    $jqOpts.eq(3).prop("selected", true);    // 选中第四个选项
    
    $jqOpts.filter("[value=3]").prop("disabled", true); // 禁用选项，禁用后无法手选此项

ps：jquery1.6后新增prop()方法，prop()方法主要用来获取和设置元素的特定属性值，有遇到过一种情况当checkbox被选中时checked属性值并没有被设置成checked="checked"的时候，使用atrr("checked") 获取到的值是undefined，select也是一样，此时只有通过prop()才能返回true、false值。

以下是官网建议attr()、prop()的使用

 

三、jquery select 添加、删除选项

    $jqOpts.first().remove();    // 移除第一个选项
    $jqOpts.filter("[value=2]").remove();    // 移除值为2的选项
    
    $jqSel.append('<option value="6">追加的选项</option>');    // 列表底部追加一个新选项
    $jqSel.prepend('<option value="7">前置的选项</option>');    // 列表顶部前置一个新选项

 

四、jquery select change事件的触发

    // 为下拉列表添加change事件，只有在手动改变选项的情况下才能触发事件
    $jqSel.change(function(){
        alert("select value change");
    });
    
    // 触发change事件
    $jqSel.change();
    
    // 重置按钮无法触发下拉列表的change事件，这里可以修改重置按钮的点击事件
    $btnReset.click(function(event){
        // 阻止默认事件
        event.preventDefault();        
        // 调用表单DOM对象reset方法，jquery对象没有reset方法 
        $jqForm[0].reset();        
        // 触发下拉列表change事件
        $jqSel.change();
    });

 

HTML代码

<form id="jq-form" action="" method="get">
    <select id="jq-select" name="">
        <option value="1">第一个选项</option>
        <option value="2">第二个选项</option>
        <option value="3">第三个选项</option>
        <option value="4">第四个选项</option>
        <option value="5">第五个选项</option>
    </select>
    <input id="btn-reset" type="reset" />
</form>