よく使う、よく忘れる。
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.ドロップダウンボックスの長さは、最長のオプションによって決定されます。
<!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.モバイルデバイスのブランドが異なれば、ポップアップスタイルも異なります。
Xiaomi携帯電話：
Appleの携帯電話はこれに似ており、次のように作成されています。
3.ドロップダウンボックスからの複数選択
複数の属性を追加して選択すると、複数の選択が可能になります。
4.ドロップダウンボックスはデフォルトでプロンプトテキストが選択されているため、プロンプトテキストはドロップダウンコンテンツに表示されません（つまり、プロンプトテキストは選択できません）。
選択された属性が選択のオプションに追加されると、それはアイテムがデフォルトで選択されることを意味します。
単一選択状態で、複数のオプションが選択された属性を追加すると、後者のオプションの内容が表示されます。
非表示の属性が選択のオプションに追加されると、アイテムはドロップダウン選択に表示されません。
<!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>
