下拉框(select)是我们在做Web系统时经常会用到的html标签,最长碰见的就是获取下拉框选中的值或者文本的问题了,当然还有动态添加下拉框选项或者移除下拉框选项以及设置默认选中值的操作,很多刚开始接触jQuery的人可能对于操作下拉框这样的问题会比较困惑,这边我就特意整理了一些jQuery操作下拉框的常用方法。 1.jQuery获取Select选择的Text和Value:
语法解释:
1
2
3
4
5
1. $(
"#select_id"
).change(
function
(){
//code...}); //为Select添加事件,当选择其中一项时触发
2.
var
checkText=$(
"#select_id"
).find(
"option:selected"
).text();
//获取Select选择的Text
3.
var
checkValue=$(
"#select_id"
).val();
//获取Select选择的Value
4.
var
checkIndex=$(
"#select_id "
).get(0).selectedIndex;
//获取Select选择的索引值
5.
var
maxIndex=$(
"#select_id option:last"
).attr(
"index"
);
//获取Select最大的索引值
2.jQuery设置Select选择的 Text和Value:
语法解释:
1
2
3
1. $(
"#select_id "
).get(0).selectedIndex=1;
//设置Select索引值为1的项选中
2. $(
"#select_id "
).val(4);
// 设置Select的Value值为4的项选中
3. $(
"#select_id option[text='jQuery']"
).attr(
"selected"
,
true
);
//设置Select的Text值为jQuery的项选中
3.jQuery添加/删除Select的Option项:
语法解释:
1
2
3
4
5
6
1. $(
"#select_id"
).append(
"<option value='Value'>Text</option>"
);
//为Select追加一个Option(下拉项)
2. $(
"#select_id"
).prepend(
"<option value='0'>请选择</option>"
);
//为Select插入一个Option(第一个位置)
3. $(
"#select_id option:last"
).remove();
//删除Select中索引值最大Option(最后一个)
4. $(
"#select_id option[index='0']"
).remove();
//删除Select中索引值为0的Option(第一个)
5. $(
"#select_id option[value='3']"
).remove();
//删除Select中Value='3'的Option
5. $(
"#select_id option[text='4']"
).remove();
//删除Select中Text='4'的Option
转载于猿2048:➩《jquery获取下拉框选中值及动态添加移除选项的操作》