[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>
```
