总结下jQuery获取和设置select,radio,checkbox选项的方法

这两天帮朋友做了几套前端,很是忙啊,搞的博客都很少更新了,我会尽快补上滴,不过这次也收获了不少的东西,这里自己总结,也给需要人看下:

Jquery获取和设置select,radio,checkbox选项的方法

<select id='addRegType'></select>
 $("#ddlRegType").find("option:selected").text();

或者:$("#ddlRegType").find("option[selected]").text();
$("#ddlRegType ").val();
$("#ddlRegType ").get(0).selectedIndex;
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值
$("#ddlRegType ").attr("value","Normal“);
$("#ddlRegType ").val("Normal");
$("#ddlRegType ").get(0).value = value;
var count=$("#ddlRegType ").size();
for(var i=0;i<count;i++) 
{           if($("#ddlRegType ").get(0).options[i].text == text) 
{ 
$("#ddlRegType ").get(0).options[i].selected = true; 
break; 
} 
}
$("#ddlRegType ").empty();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
</head>
<body>
        Are you male or femal? <br>
<input type="radio" name="gender" checked value="male">male<br>
<input type="radio" name="gender" value="female">female<br>
<input type="radio" name="gender" value="gay">gay<br>
<input type="button" value="获得radio选中的值" name="radioBtn1">&nbsp;&nbsp;<input type="button" value="设gay为被选项" name="radioBtn2">
<hr>
        Which fruit do you like?<br>
<input type="checkbox" name="fruit" value="apple">apple<br>
<input type="checkbox" name="fruit" value="strawberry">strawberry<br>
<input type="checkbox" name="fruit" value="mango">mango<br>
<input type="checkbox" name="fruit" value="cherry">cherry<br>
<input type="checkbox" name="fruit" value="leechee">leechee<br>
<input type="button" value="获取checkbox的选中值" name="btn3">&nbsp;&nbsp;<input type="button" value="love strawberry" name="btn4"><br><br>
<input type="button" value="全选" name="btn5">&nbsp;&nbsp;<input type="button" value="取消全选" name="btn6">
<hr>
        where is your hometown?
<select name='hometown'>
<option value='shandong'>山东</option>
<option value='sichuang'>四川</option>
<option value='shanghai'>上海</option>
</select>
<br><br>
<input type='button' name='btn7' value='select被选中的value值'>&nbsp;&nbsp;
<input type='button' name='btn8' value='select被选中的文本值'>&nbsp;&nbsp;
<input type='button' name='btn9' value='设置‘四川’为当前选中值'>&nbsp;&nbsp;
<input type='button' name='btn10' value='清空下拉框'>

</body>
</html>
<script>
$(document).ready(function(){
$("input[name=radioBtn1]").click(function(){
var val = $("input[name=gender][checked]").val();
alert(val);
});
$("input[name=radioBtn2]").click(function(){
$('input[name=gender]').attr("checked",'2');
//$('input[name=gender]').get(2).checked=true; //这种写法也可以
});

$("input[name=btn3]").click(function(){
$("input[name=fruit][checked]").each(function(){
alert($(this).attr("value"));
});
});

$("input[name=btn4]").click(function(){
$("input[name=fruit]").get(1).checked = true;
});

$("input[name=btn5]").click(function(){
$("input[name='fruit']").attr("checked",true);
/*
            $("input[name='fruit']").each(function(){
                $(this).attr("checked",true);
            });*/

});

$("input[name=btn6]").click(function(){
$("input[name='fruit']").attr("checked",'');
/*
            $("input[name='fruit']").each(function(){
                $(this).attr("checked",'');
            });*/
});

$("input[name=btn7]").click(function(){
var val = $("select[name=hometown]").val();
alert(val);
});

$("input[name=btn8]").click(function(){
//var val = $("select[name=hometown]").find("option:selected").text();
var val = $("select[name=hometown] option[selected]").text();
alert(val);
});

$("input[name=btn9]").click(function(){
$("select[name=hometown]")[0].selectedIndex = 1;
});

$("input[name=btn10]").click(function(){
$("select[name=hometown]").empty();
});
});
</script>

 

我们不Hack软件,我们只是优秀软件的搬运工。
麦氪搜(iMacso.com) » 总结下jQuery获取和设置select,radio,checkbox选项的方法