简介jquery里对select进行各种操作的方法,如联动、取值、根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等。
这一章,站长总结一下jquery里对下拉框select的各种操作,如两个或三个select下拉框的联动效果,读取select下拉框里选中项的值和文本,根据指定的值或文本来选中select下拉框的指定项等操作,先来看具体的在线实例演示:
jquery操作下拉框select的各种方法在线实例演示
下面是上面在线实例的截图:
[jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等_1]
1.先说select下拉框联动效果的实现,大家可以点下面的链接查看,里面有很完整的代码及讲解:
jquery三级联动select下拉菜单特效的实现方法和在线实例展示
2.根据指定的文本来选中select下拉框指定的optilon选项,在网上搜索,基本上说的都是用下面的方法:
$(".selector").find("option[text='angeleb']").attr("selected",true);
但是站长要说,上面的方法是不正确的,至少站长在测试的时候,根本就不起作用,站长用的jquery库的版本是1.7的,测试了好几次都不成功,站长用的方法是下面这样的:
<script language="javascript">
var VZhi=$("#TZhi").val();
$("#S1 option").each(function(i,n){
if($(n).text()==VZhi){
$(n).attr("selected",true);
}
});
</script>
3.根据指定的值来选中select下拉框中指定的option选项:
<script language="javascript">
var VZhi=$("#VZhi").val();
$("#S1 option[value='"+VZhi+"']").attr("selected","selected");
</script>
4.获取select下拉框选中项的option的值:
var S3=$("#S3 option:selected").val();
5.获取select下拉框选中项的option的text文本:
var S2=$("#S2 option:selected").text()
6.动态增加或删除option选项:
//为Select的末尾追加一个Option下拉项
$("#select").append("<option value='Value'>Text</option>");
//在Select的开头追加一个Option下拉项
$("#select").prepend("<option value='0'>请选择</option>");
//删除Select中索引值最大(最后一个)Option
$("#select option:last").remove();
//删除Select中索引值为0(第一个)的Option
$("#select option[index='0']").remove();
//删除Select中Value='3'的Optiona
$("#select option[value='3']").remove();