首页 > 代码库 > jquery 对下拉框和单选框的一些操作

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

2024-08-10 14:28:00   211人阅读

下拉框

 <select id="CategoryId" data-placeholder="资产类型" style="width: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=http://www.mamicode.com/‘‘>");                    for (var i = 0; i < list.length; i++) {                             var o = "<option value=http://www.mamicode.com/‘" + 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=http://www.mamicode.com/3]").prop("checked", ‘checked‘);     $("input[name=‘Fruit‘][value=http://www.mamicode.com/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=http://www.mamicode.com/2]").attr("disabled","true"); //"待测试"禁止选中

 

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


联系
我们