jquery 对下拉框和单选框的一些操作
浏览数：34 /
时间：2015年06月09日
下拉框
<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=‘‘></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"); //"待测试"禁止选中
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
