[转]jquery获得select option的值和对select option的操作

最新推荐文章于 2024-07-29 03:35:59 发布

原创最新推荐文章于 2024-07-29 03:35:59 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #select #option #ViewUI

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用jQuery操作Select元素，包括获取选中的文本、值、索引，设置选中的值、索引、文本，添加、删除、修改Select选项，以及全选、取消全选、选择奇数项和反选复选框。

转自：[url]http://huiyi.yangteng.blog.163.com/blog/static/111209721201122160412/[/url]
[color=red]获取Select ：[/color]

//获取select 选中的 text :
   $("#ddlRegType").find("option:selected").text();
//获取select选中的 value:
   $("#ddlRegType ").val();
//获取select选中的索引:
     $("#ddlRegType ").get(0).selectedIndex;

[color=red]设置select:[/color]
[color=blue]设置select 选中的索引：[/color]

 $("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

[color=blue]设置select 选中的value：[/color]

    $("#ddlRegType ").attr("value","Normal“);
    $("#ddlRegType ").val("Normal");
    $("#ddlRegType ").get(0).value = value;

[color=blue]设置select 选中的text:[/color]

var count=$("#ddlRegType option").length;
  for(var i=0;i<count;i++)  
     {           if($("#ddlRegType ").get(0).options[i].text == text)  
        {  
            $("#ddlRegType ").get(0).options[i].selected = true;  

            break;  
        }  
    }
$("#select_id option[text='jQuery']").attr("selected", true);

[color=blue]设置select option项:[/color]

 $("#select_id").append("<option value='Value'>Text</option>");  //添加一项option
 $("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
 $("#select_id option:last").remove(); //删除索引值最大的Option
 $("#select_id option[index='0']").remove();//删除索引值为0的Option
 $("#select_id option[value='3']").remove(); //删除值为3的Option
 $("#select_id option[text='4']").remove(); //删除TEXT值为4的Option

清空 Select:
$("#ddlRegType ").empty();

[color=red]jquery获得值：[/color]
.val()
.text()

设置值
.val('在这里设置值')


$("document").ready(function(){   
	$("#btn1").click(function(){   
		$("[name='checkbox']").attr("checked",'true');//全选   
	})   
	$("#btn2").click(function(){   
		$("[name='checkbox']").removeAttr("checked");//取消全选   
	})   
	$("#btn3").click(function(){   
		$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数   
	})   
	$("#btn4").click(function(){   
		$("[name='checkbox']").each(function(){//反选   
			if($(this).attr("checked")){   
				$(this).removeAttr("checked");   
			}   
			else{   
				$(this).attr("checked",'true');   
			}   
		})   
	})   
	$("#btn5").click(function(){//输出选中的值   
		var str="";   
		$("[name='checkbox'][checked]").each(function(){   
			str+=$(this).val()+"\r\n";   
			//alert($(this).val());   
		})   
		alert(str);   
	})   
})