자주 사용하고 자주 잊어 버리십시오.
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. 모바일 장치의 브랜드에 따라 팝업 스타일이 다릅니다.
샤오 미 휴대폰 :
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>
