您的位置：首页 > Web前端 > JQuery

jquery操作下拉框select

2016-06-28 17:07 666 查看

Jquery操作select标签选中、更改选中、清空、删除和增加：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 测试</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div>
<select id="select1">
<option value="">--请选择--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="5">5</option>
</select>
<input type="button" value="测试选中" id="ceshi" />
<p>
<select id="select2">
<option value="">--请选择--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" value="清空" id="qingkong" />
<p>
<select id="select3">
<option value="" index="0">--请选择--</option>
<option value="1" index="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" value="删除" id="shanchu" />
<p>
<input type="button" value="增加" id="zengjia" />
<script type="text/javascript">
$("#ceshi").bind("click",
function (){
$("#select1 ").get(0).selectedIndex=1; //设置Select索引为1的项选中
alert($("#select1").find("option:selected").text())

$("#select1 ").val(2); // 设置Select的Value值为4的项选中
alert($("#select1").find("option:selected").text())

//设置Select的Text值为jQuery的项选中
var street = '3';
$('#select1 option:contains(' + street + ')').each(function(){
if ($(this).text() == street) {
$(this).attr('selected', true);
}
});
alert($("#select1").find("option:selected").text())

$("#select1").find("option:contains('2')").attr('selected', true);
alert($("#select1").find("option:selected").text())

alert($("#select1 option:contains('5')").text())

var checkText=$("#select1").find("option:selected").text(); //获取Select选择的Text
var checkValue=$("#select1").val(); //获取Select选择的Value
var checkIndex=$("#select1 ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#select1").find("option:last").index(); //获取Select最大的索引值
alert("选中的value"+checkValue)
alert("选中的text"+checkText)
alert("选中的索引"+checkIndex)
alert("索引最大值"+maxIndex)
})

$("#qingkong").bind("click",
function (){
alert("清空")
$("#select2").empty();

})
$("#shanchu").bind("click",
function (){
alert("删除")
$("#select3").find("option:last").remove(); //删除Select中索引值最大Option(最后一个)

$("#select3").find("option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 需要在option标签上加上index="0"

$("#select3").find("option[value='3']").remove(); //删除Select中Value='3'的Option

})
$("#zengjia").bind("click",
function (){
alert("增加")
$("#select2").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)

$("#select2").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

$("#select2 ").get(0).selectedIndex=0;
})
</script>

</body>
</html>附源代码下载链接：源代码。
解压后用浏览器打开即可。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Jquery操作select select标签的选中 select标签的text值 select标签的value值 jqery获取select标签的valu

相关文章推荐

新的分享

章节导航