经常用，经常忘记。
JS
document.querySelector("select").onchange = function(){
console.log(this.selectedIndex);//选中项下标
console.log(this.options[this.selectedIndex].innerText);//选中项文本
console.log(this.options[this.selectedIndex].value);//选中项value
}JQuery
$("select").change(function(){
console.log($(this).children("option:selected").text())//选中option标签里的文本值
console.log($(this).find("option:selected").val())//选中内容
console.log($(this).children("option:selected").index())//选中下标
console.log($(this).find("option:selected").index())//选中下标
console.log($(this).prop("selectedIndex")//选中下标
})借势科普一下下拉框一些小知识：
1.下拉框长度由最长option决定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="">
<option value="1">666</option>
<option value="2">的法国德国</option>
<option value="3">是的冯绍峰</option>
<option value="4">打个梵蒂冈</option>
<option value="5">额无任何</option>
</select>
</body>
</html>
2.不同品牌的移动端设备下拉框弹出样式不一样：
小米手机：
苹果手机就类似这个，向上划起来：
3.下拉框多选
当select加上multiple属性后， 即可实现多选。
4.下拉框默认选中，提示文字，让提示文字不出现在下拉内容里(即:提示文字不能选中)
当在select的option添加selected属性是 ，就表示默认选中该项；
在单选状态下，若多个option添加selected属性时，显示后一个option内容；
当在select的option添加hidden属性是 ，该项就不会出现在下拉选中；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="asset/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<select name="">
<option value="1">草莓</option>
<option value="2">苹果</option>
<option value="3">菠萝</option>
<option value="4">桃子</option>
<option selected hidden>请选择你最喜欢的水果</option>
</select>
<div class="val"></div>
</body>
<script type="text/javascript">
$("select").change(function(){
$(".val").text($(this).children("option:selected").text())
})
</script>
</html>
