zoukankan      html  css  js  c++  java
  • JQuery的Select操作集合

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

    jQuery添加/删除Select的Option项:   
    语法解释:   

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












    比如<select class="selector"></select>

    
    

    1、设置value为pxx的项选中

    
    

         $(".selector").val("pxx");

    
    

    2、设置text为pxx的项选中

    
    

        $(".selector").find("option[text='pxx']").attr("selected",true);

    
    

        这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

    
    

    3、获取当前选中项的value

    
    

        $(".selector").val();

    
    

    4、获取当前选中项的text

    
    

        $(".selector").find("option:selected").text();

    
    

        这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

    
    

     

    
    

    很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

    
    

    如:$(".selector1").change(function(){

    
    

         // 先清空第二个

    
    

          $(".selector2").empty();

    
    

         // 实际的应用中,这里的option一般都是用循环生成多个了

    
    

          var option = $("<option>").val(1).text("pxx");

    
    

          $(".selector2").append(option);

    
    

    });






  • 相关阅读:
    PAT 甲级 1132 Cut Integer (20 分)
    AcWing 7.混合背包问题
    AcWing 9. 分组背包问题
    AcWing 5. 多重背包问题 II
    AcWing 3. 完全背包问题
    AcWing 4. 多重背包问题
    AcWing 2. 01背包问题
    AcWing 875. 快速幂
    AcWing 874. 筛法求欧拉函数
    AcWing 873. 欧拉函数
  • 原文地址:https://www.cnblogs.com/chencheng365/p/4330273.html
Copyright © 2011-2022 走看看