jquery select 下拉框实用操作

工作中避免不了会用到下拉框，今天总结一下jquery对select的常用操作（不包含多选项），下面的代码基于jquery1.7.2测试通过。

01<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

02 

03<select name="my_select"id="my_select">

04    <option value="v1">text1</option>

05    <option value="v2">text2</option>

06    <option value="v3" selected='true'>text3</option>

07    <option value="v4">text4</option>

08    <option value="v5">text5</option>

09</select>

10 

11<script type="text/javascript">

12 

13    $(function(){

14 

15        //取当前选中值的几种方式

16        $('#my_select').val();

17        $('[name=my_select]').val();

18 

19        //取option内容文本的方式

20        $('#my_select').text();

21 

22        //取选中项的方式

23        $("#my_select option:selected");

24 

25        //取选中option内容文本的方式

26        $('#my_select option:selected').text();

27 

28        //选中指定项的几种方式

29        $("#my_select option[value='v4']").attr('selected','selected');

30        $("#my_select").val('v5');

31        $("#my_select").prop("selectedIndex", 1);

32 

33        //选中第一个

34        $('#my_select option:first').attr('selected','selected');

35 

36        //选中最后一个

37        $('#my_select option:last').attr('selected','selected');

38 

39        //取option个数

40        $("#my_select option").length;

41 

42        //change事件处理

43        $('#my_select').change(function(){

44 

45            alert($('#my_select option:selected').text());

46 

47        });

48 

49        //根据option内容文本选中的方式,这里选中text4,filter函数真的是很强大

50        $("#my_select").val(function() {

51              return$('option',this).filter(function() {

52                return$(this).text() =='text4';

53              }).val();

54        });

55 

56        //遍历option

57        $("#my_select  option").each(function() {

58            alert(this.text +' ' + this.value);

59        });

60 

61        //删除所有的option选项的方式

62        $('#my_select').empty();

63        $('#my_select option').remove();

64 

65    });

66 

67</script>