Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 258|回复: 0

[默认分类] jquery获得select option的值 和对select option的操作

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-9 13:43:05 | 显示全部楼层 |阅读模式


      
       
       
         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 name="thirdLevel" id="thirdLevel"
    onchange="getFourthLevel()">
    <option value="0" id="thirdOption">
    请选择三级分类
    </option>
    </select>
    </div>

    四级分类:
    <select name="fourthLevelId" id="fourthLevelId">
    <option value="0" id="fourthOption">
    请选择四级分类
    </option>
    </select>

    </div>

    .if($("#thirdLevel").val()!=0){
    $("#thirdLevel option[value!=0]").remove();
    }
    if($("#fourthLevelId").val()!=0){
    $("#fourthLevelId option[value!=0]").remove();
    }//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到!
          
         获取Select :
          获取select 选中的 text :
            $("#ddlRegType").find("option:selected").text();
          
          获取select选中的 value:
            $("#ddlRegType ").val();
          
          获取select选中的索引:
              $("#ddlRegType ").get(0).selectedIndex;
          
         设置select:
          设置select 选中的索引:
              $("#ddlRegType ").get(0).selectedIndex=index;//index为索引值
          
          设置select 选中的value:
             $("#ddlRegType ").attr("value","Normal“);
             $("#ddlRegType ").val("Normal");
             $("#ddlRegType ").get(0).value = value;
          
          设置select 选中的text:
         var count=$("#ddlRegType option").length;
           for(var i=0;i<count;i++)  
         {           if($("#ddlRegType ").get(0).options.text == text)  
            {  
                $("#ddlRegType ").get(0).options.selected = true;  
             
                break;  
            }  
        }
          
         $("#select_id option[text="jQuery"]").attr("selected", true);
          
         设置select option项:
          
          $("#select_id").append("<option value="Value">Text</option>");  //添加一项option
          $("#select_id").prepend("<option value="0">请选择</option>"); //在前面插入一项option
          $("#select_id option:last").remove(); //删除索引值最大的Option
          $("#select_id option[index="0"]").remove();//删除索引值为0的Option
          $("#select_id option[value="3"]").remove(); //删除值为3的Option
          $("#select_id option[text="4"]").remove(); //删除TEXT值为4的Option
          
         清空 Select:
         $("#ddlRegType ").empty();
         

         jquery获得值:
         .val()
         .text()
         

         设置值
         .val("在这里设置值")
         

         

         $("document").ready(function(){
    $("#btn1").click(function(){
    $("[name="checkbox"]").attr("checked","true");//全选
    })
    $("#btn2").click(function(){
    $("[name="checkbox"]").removeAttr("checked");//取消全选
    })
    $("#btn3").click(function(){
    $("[name="checkbox"]:even").attr("checked","true");//选中所有奇数
    })
    $("#btn4").click(function(){
    $("[name="checkbox"]").each(function(){//反选
    if($(this).attr("checked")){
    $(this).removeAttr("checked");
    }
    else{
    $(this).attr("checked","true");
    }
    })
    })
    $("#btn5").click(function(){//输出选中的值
    var str="";
    $("[name="checkbox"][checked]").each(function(){
    str+=$(this).val()+"\r\n";
    //alert($(this).val());
    })
    alert(str);
    })
    })

       
      

    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-2-23 21:00 , Processed in 0.319507 second(s), 35 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表