使用jquery操作select（獲取選中option的值等）

總結下使用jQuery操作select的方法。

1.獲取第一個候選項的值。

$('#test option:first').val();

2.獲取最后一個候選項的值。

$('#test option:last').val();

3.獲取第二個候選項的值。

$('#test option:eq(1)').val();

4.獲取選中的候選項的值。

$('#test').val();

$('#test option:selected').val();

5.設置值為2的候選項為選中狀態。

$('#test').attr('value','2');

6.設置最后一個候選項為選中。

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

$("#test").attr('value' , $('#test option:last').val());

$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());

7.獲取候選項列表的長度。

$('#test option').length;

8.添加一個候選項。

$("#test").append("<option value='n+1'>第N+1項</option>");

$("<option value='n+1'>第N+1項</option>").appendTo("#test");

9.刪除選中項。

$('#test option:selected').remove();

10.刪除項（這里刪除第一項）。

$('#test option:first').remove();

11.刪除指定值。

$('#test option').each(function() {
   if ($(this).val() == '5'){
        $(this).remove();
    }
});

$('#test option[value=5]').remove();

12.獲取第一個分組的標簽。

$('#test optgroup:eq(0)').attr('label');

13.獲取第二個分組下面第一個候選項的值。

$('#test optgroup:eq(1) : option:eq(0)').val();

14.根據候選項的值選中候選項。

$("#sel option:contains('C')").prop("selected", true);

select在業務表單中使用得非常多，掌握如何使用jQuery去操作select是很有必要的，即使現在的前端發展趨勢是提倡操作數據而避免直接操作dom（比如vue）。

 

"記憶總是這樣不經意間竄入腦海，我終於沒能留下你漸行漸遠的腳步。"