[TOC]
例子：
```
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<select name="test" id="select_id">
<option value="1" data-value="12">10</option>
<option value="2">20</option>
<option value="value">value</option>
</select>
```
# （一）觸發
## 觖發事件
```
1. $("#select_id").change(function(){//code...}); //為Select添加事件，當選擇其中一項時觸發
```
# （二）獲取
## 1、獲取Select選擇的Text值
```
1. $("#select_id").find("option:selected").text(); //建議
2. $("#select_id option:selected").text(); //建議
3. $("select[name='test']").find("option:selected").text(); //建議
```
## 2、獲取Select選擇的Value值
```
1. $("#select_id").val();
```
## 3、獲取select選擇的索引值
```
1. $("#select_id").get(0).selectedIndex;
2. $('#select_id').prop('selectedIndex');
3. $('option:selected', '#select_id').index();
4. $('#select_id option').index($('#select_id option:selected'))
5. $("#select_id option:last").attr("index"); //獲取Select最大的索引值
```
## 4、得到select項的個數
```
$("#select_id").get(0).options.length
```
## 5、獲取select選擇的自定義值
```
$("#select_id").find("option:selected").attr("data-value"); //建議
```
# （三）選中
## 1、根據value值選中
```
1. $("#select_id").val(4); //根據value值選中
```
## 2、根據索引值選中
```
1. $("#select_id").get(0).selectedIndex=1; //根據索引值選中
```
## 3、設置text為pxx的項選中
```
$(".selector").find("option[text='pxx']").attr("selected",true);
```
## 4、最后一個值選中
```
$("#approve option:last").attr("selected",true);
```
# （四）添加
## 1、添加select的Option項
```
1. $("#select_id").append("<option value='Value'>Text</option>"); //為Select追加一個Option(下拉項)
2. $("#select_id").prepend("<option value='0'>請選擇</option>"); //為Select插入一個Option(第一個位置)
3. $("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option
4. $("#select_id").get(0).options.add(new Option(text,value));
```
# （五）刪除和清空
## 1、刪除select的Option項
```
3. $("#select_id option:last").remove(); //刪除Select中索引值最大Option(最后一個)
5. $("#select_id option[value='3']").remove(); //刪除Select中Value='3'的Option
6. $("#select_id option[data-value='12']").remove(); //刪除自定義 data-value
```
## 2、清空
```
1. $("#select_id").empty();//清空下拉框//$("#select").html('');
2. $("#select_id").get(0).options.length = 0;
```
# （六）其他
## 1、判斷一組select是否有空值
```
$('[name=select]').each(function () {
if ($(this).val() == "0") {
alert('請填寫值！');
return;
}
});
```
## 1、獲取一組select的數量
方法一：
```
$('[name=select]').length
```
方法二：
```
$(".select_class").length;
```
## 3、當一組select有值的話，給另外一個select賦它的值
```
<h2>兩個select選擇后，另外一個select才被賦值</h2>
<h2>select1</h2>
<select name="cost" id="select1" class="select_class">
<option value="0" >請選擇</option>
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
<select name="cost" id="select2" class="select_class">
<option value="0" >請選擇</option>
<option value="11" selected >11</option>
<option value="22">22</option>
</select>
<h2>select_ok</h2>
<select name="select_ok" id="select_ok">
<option value="0">請選擇</option>
</select>
//2、判斷一組select是否有空值 $.each
//3、當一組select有值的話，給另外一個select賦它的值
var newcost = [];
var newstring;
var obj = $('[name=cost]');
var html = '';
$.each(obj,function (index,item) {
newstring = $(item).find("option:selected").val();
html += '<option>'+$(item).find("option:selected").text()+'</option>';
if(result == '0'){
console.log('需要全部選擇完再才能進行');
return false;
}
newcost.push(newstring);
});
console.log(html);
var result = newcost.indexOf('0').toString();
console.log(result);
if(result == "-1"){
$("#select_ok").append(html);
}else{
return false;
}
```
如圖：
## 4、獲取選中的option一行
```
$(this).find("option:selected").get(0)
```
## 5、select去重
```
```
# 實例
## 1、jQuery獲取select中所有option值
```
<select id="language">
<option value="">請選擇</option>
<option value="Java">Java</option>
<option value="PHP">PHP</option>
<option value="Jekyll">Jekyll</option>
</select>
$(function(){
var array = new Array(); //定義數組
$("#language option").each(function(){ //遍歷所有option
var txt = $(this).val(); //獲取option值
if(txt!=''){
array.push(txt); //添加到數組中
}
})
})
```
## 2、去掉重復的select
```
<h2>去掉重復的select</h2>
<select id="selectTest">
<option>1</option>
<option>1</option>
<option>2</option>
<option>2</option>
<option>3</option>
</select>
<input id="btndel" type="button" value="刪除重復項">
<script>
$(function(){
$("#btndel").click(function() {
$("#selectTest option").each(function() { /*作用：遍歷select option */
var getText = $(this).text();
if($("#selectTest option:contains("+getText+")").length > 1) /*作用：select option:contains("+text+")")包含text的個數 */
{
$("#selectTest option:contains("+getText+"):gt(0)").remove(); /*作用：包含text大于個數0的選項就移除*/
}
});
});
});
</script>
```
