• 技术文章 >web前端 >js教程

    jquery下拉select控件操作方法分享(jquery操作select)_jquery

    2016-05-16 16:54:29原创474
    JQuery获取和设置Select选项方法汇总如下:

    代码:

    复制代码 代码如下:

    $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
    var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
    var checkValue=$("#select_id").val(); //获取Select选择的Value
    var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
    var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
    $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
    $("#select_id ").val(4); //设置Select的Value值为4的项选中
    $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

    获取select 选中的 text :

    复制代码 代码如下:

    $("#ddlRegType").find("option:selected").text();

    获取select选中的 value:

    复制代码 代码如下:

    $("#nowamagic").val();

    获取select选中的索引:

    复制代码 代码如下:

    $("#nowamagic").get(0).selectedIndex;

    设置select

    jQuery添加/删除Select的Option项:

    复制代码 代码如下:

    $("#select_id").append(""); //为Select追加一个Option(下拉项)
    $("#select_id").prepend(""); //为Select插入一个Option(第一个位置)
    $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
    $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
    $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
    $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

    设置select 选中的索引:

    复制代码 代码如下:

    //index为索引值
    $("#nowamagic").get(0).selectedIndex=index;

    设置select 选中的value:

    复制代码 代码如下:

    $("#nowamagic").attr("value","Normal");
    $("#nowamagic").val("Normal");
    $("#nowamagic").get(0).value = value;

    设置select 选中的text:

    复制代码 代码如下:

    var count=$("#nowamagicoption").length;
    for(var i=0;i { if($("#nowamagic").get(0).options[i].text == text)
    {
    $("#nowamagic").get(0).options[i].selected = true;

    break;
    }
    }

    清空 select:

    复制代码 代码如下:

    $("#nowamagic").empty();
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:JavaScript数字和字符串转换示例_javascript技巧 下一篇:Javascript连接多个数组不用concat来解决_javascript技巧
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 一文搞定JavaScript的节点操作• JavaScript类数组和可迭代对象的实现原理详解• 带你深入了解HTTP模块• 聊聊Node.js path模块中的常用工具函数• 手把手带你使用node开发一个命令行压缩工具
    1/1

    PHP中文网