代码改变世界

jQuery 处理表单操作

2012-03-10 14:21  臭小子1983  阅读(383)  评论(0编辑  收藏  举报

一、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("选中")

  }