zoukankan      html  css  js  c++  java
  • jQuery 处理表单操作

    一、select下拉菜单操作

    1、添加option 

      $("<option value='111'>UPS Ground</option>").appendTo($("#ID"));

       

    2、移除option

      $("#ID option").each(function(){
        if($(this).val() == 111){
          $(this).remove();
        }
      });

    3、取得下拉选单的选取值

      $(#testSelect option:selected').text();
      $("#testSelect").find('option:selected').text();
      $("#testSelect").val();

    4、根据option的值选中下拉框

      $('#testSelect').val('111');

    5、设置下拉框选中状态

    oIssue.find("options").each(function(){
      if($(this).attr("data-cur") === "1"){
        $(this).attr("selected", true);
      }
    }) 

       

      6.获取当前选中的值*

        $('#server').change(function(e) {
          var setServerTxt = $(this).val();
          alert(setServerTxt);
        });

      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最大的索引值

      6、$("#calSelect option:first").attr("selected", true);     // 指定某个option元素为当前焦点

         $("#calSelect").get(0).selectedIndex = 0;               // 也是指写option元素的焦点,注:.selectedIndex需要是一个DOM,不是一个数组

     

      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

    二、radio单选框

      1、获取单选框选中状态的值:

        方法一

        var var_name = $("input[name='radio']:checked").val(); 

        alert(var_name);

        方法二:

        $("input[name='radio']").each(function(index, element) {
                 if($(element).attr('checked')){  // 当前如果是选中返回true;
               var msg = $(this).val();
               alert(msg);
          }
                });

      2、设置单选框value=2的为选中状态.  (还有错误)

        $('input[@name=items]').get(1).checked = true;

    三、checkbox复选框:

      1、全部选中多选框
           $("input[name='checkbox']").attr('checked', true);

      2、取消选中多选框
           $("input[name='checkbox']").removeAttr('checked'); 

      3、选中奇数文本框
           $("input[name='checkbox']:even").attr('checked',true);

      4、获取选中项的值

    <script>
      var sendData = $("#sendData");
      sendData.click(function(){
        $("input[name='paylerName']:checked").each(function(index, element) {
          alert("ka")
          alert($(this).val()+index);
        });
      })
    </script>

     

      5、反选   

        $("input[name='checkbox']").each(function(index, element) {
                    if($(this).attr("checked")){  
               $(this).removeAttr("checked");  
            }  
            else { 
               $(this).attr("checked",'true'); 
            }  
                });

      

      6、是否被选中

      if(!$("#inp").attr("checked") ){    // checkbox初始时是没有这个checked属性,所以返回的undefinde

        alert("未选中");

      }

      else{

        alert("选中")

      }

      

  • 相关阅读:
    Android 亮度调节
    Android异步回调中的UI同步性问题
    Java总结篇系列:Java 反射
    Node入门教程(4)第三章:第一个 Nodejs 程序
    Node入门教程(3)第二章: Node 安装
    Node入门教程(2)第一章:NodeJS 概述
    Node入门教程(1)目录
    前端面试题:JS中的let和var的区别
    IT学习逆袭的新模式,全栈实习生,不8000就业不还实习费
    11-移动端开发教程-zepto.js入门教程
  • 原文地址:https://www.cnblogs.com/couxiaozi1983/p/2389074.html
Copyright © 2011-2022 走看看