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

jQuery获取Select选择的Text和Value:

2012-02-09 18:39 369 查看
jQuery获取Select选择的Text和Value:

语法解释:

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最大的索引值

jQuery设置Select选择的Text和Value:

语法解释:

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的项选中

jQuery添加/删除Select的Option项:

语法解释:

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

刷新select

var titleTypeArray = data.titleList;

//create title type select

$("#select_title").empty();

$.each(titleTypeArray,function(){

$("#select_title").append("<option value="+this.code+">"+this.description+"</option>");

});

checkbox 操作

function getCheckedLanguage(){

var str = "";

$("[name='attach_country']:[checked]").each(function() {

str += $(this).val() + ",";

});

return str;

}

===================================checkbox ========================================================

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3 <HEAD>

4 <TITLE> New Document </TITLE>

5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

6 <link href="css/ingrid.css" rel="stylesheet" type="text/css">

7<script language="JavaScript" src="jquery-1.2.3.pack.js" type="text/javascript"></script>

8 <SCRIPT LANGUAGE="JavaScript">

9 <!--

10 $("document").ready(function(){

11

12 $("#btn1").click(function(){

13

14 $("[name='checkbox']").attr("checked",'true');//全选

15

16 })

17 $("#btn2").click(function(){

18

19 $("[name='checkbox']").removeAttr("checked");//取消全选

20

21 })

22 $("#btn3").click(function(){

23

24 $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

25

26 })

27 $("#btn4").click(function(){

28

29 $("[name='checkbox']").each(function(){

30

31

32 if($(this).attr("checked"))

33 {

34 $(this).removeAttr("checked");

35

36 }

37 else

38 {

39 $(this).attr("checked",'true');

40

41 }

42

43 })

44

45 })

46 $("#btn5").click(function(){

47 var str="";

48 $("[name='checkbox'][checked]").each(function(){

49 str+=$(this).val()+"\r\n";

50 })

51 alert(str);

52 })

53 })

54 //-->

55 </SCRIPT>

56

57 </HEAD>

58

59 <BODY>

60 <form name="form1" method="post" action="">

61 <input type="button" id="btn1" value="全选">

62 <input type="button" id="btn2" value="取消全选">

63 <input type="button" id="btn3" value="选中所有奇数">

64 <input type="button" id="btn4" value="反选">

65 <input type="button" id="btn5" value="获得选中的所有值">

66 <br>

67 <input type="checkbox" name="checkbox" value="checkbox1">

68 checkbox1

69 <input type="checkbox" name="checkbox" value="checkbox2">

70 checkbox2

71 <input type="checkbox" name="checkbox" value="checkbox3">

72 checkbox3

73 <input type="checkbox" name="checkbox" value="checkbox4">

74 checkbox4

75 <input type="checkbox" name="checkbox" value="checkbox5">

76 checkbox5

77 <input type="checkbox" name="checkbox" value="checkbox6">

78 checkbox6

79 <input type="checkbox" name="checkbox" value="checkbox7">

80 checkbox7

81 <input type="checkbox" name="checkbox" value="checkbox8">

82 checkbox8

83 </form>

84

85 </BODY>

86</HTML>

87
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: