jquery 对下拉框和单选框的一些操作

下拉框

 <select id="CategoryId" data-placeholder="资产类型" style="350px;" >
 <option value="1">硬盘</option>
 <option value="2">主板</option>
 <option value="3">CPU</option>
 <option value="4">网卡</option>

1、设置下拉框“硬盘”为选中

    $("#CategoryId").val("1");
    $("#CategoryId").find("option[text='硬盘']").attr("selected",true);　　
　　$("#CategoryId").get(0).attr("selected",true);

2、获取下拉框的值

 $("#CategoryId").val();  #1
 $("#CategoryId").find("option:selected").text();  #"硬盘"

3、select的级联

很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。

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

     // 先清空第二个

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

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

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

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

});

    $("#DestIdcpName").change(function()
     {
        $("#id").empty();
        $.ajax({
            url: url,
            type: "POST",
            data:{"params":params},
            dataType: "json",
            success: function (list) {
                if (list.Return === 0) {
                    list = list.Data;
                      $("#"+id).append("<option value=''></option>");
                    for (var i = 0; i < list.length; i++) {
                             var o = "<option value='" + list[i][column] + "'>" + list[i][column] + "</option>";  
                            $("#id").append(o);
                    }
                    return true;
                }
            },
            error: function (list) {
                alert(list.message);
                return false;
            }
        });
        return true;
   });

复选框

<label><input  type="checkbox" id="checkAll" />全选/全不选</label>
<label><input name="Fruit" type="checkbox" value="1" />苹果</label>
<label><input name="Fruit" type="checkbox" value="1" />苹果</label> 
<label><input name="Fruit" type="checkbox" value="2" />桃子 </label> 
<label><input name="Fruit" type="checkbox" value="3" />香蕉 </label> 
<label><input name="Fruit" type="checkbox" value="4" />梨 </label>

1、复选框全选/反选

用prop或者attr 都可以

 $("[name='checkbox']").attr("checked",'true');

 $("[name='Fruit']").prop("checked",'true');

/*checkbox 实现全选和反选*/
      $('#checkAll').live('click',function(){
            if($(this).prop('checked')){
　　　　　　　　　　　　$("[name='Fruit']").each(function(){
                      $(this).prop('checked', true);
                    });
            }else{
　　　　　　　　　$("[name='Fruit']").each(function(){ 
　　　　　　　　　　$(this).prop('checked', false);
　　　　　　 });
     }
 });

2、禁用checkbox

$("input[type='checkbox']").prop({ disabled: true });
#or
$("[name='Fruit']").prop({ disabled: true });

3、设置选中

     $("input[name='Fruit'][value=3]").prop("checked", 'checked');
     $("input[name='Fruit'][value=3]").prop("checked", '');
     $("input[name='Fruit']").get(2).checked = true; 

4、获取选中值

     　$("[name='Fruit']").each(function(){ 
　　　　　if($(this).prop('checked'))
         {
             　alert($(this).val());
         }
　 });

单选框

<label><input name="IsAvailable" type="radio" value="2" />待测试 </label> 
<label><input name="IsAvailable" type="radio" value="1" />是</label>  
<label><input name="IsAvailable" type="radio" value="0" />否</label> 

1、设置选中

  $("input[name='IsAvailable']").get(0).checked= true;  //选中“待测试”
   $("input[name='IsAvailable']").val(1).checked= true;//选中“待测试”

2、获取值

  $("input[name='IsAvailable']:checked").val(); //2
　$("input[name='IsAvailable']:checked").parent().text(); //待测试

3、禁用

　$("input[name='IsAvailable'][value=2]").attr("disabled","true"); //"待测试"禁止选中