下拉選單html sample:
<select id='fruit' onchange='getInfo(this)'>
<option value=apple>Apple</option>
<option value=banana>Banana</option>
<option value=lemon>Lemon</option>
</select>
Jquery取得Value:
$('#fruit').val()
Jquery取得選取的文字:
$('#fruit').find(':selected').text()
當選單變更選項時觸發事件範例如下：
<html lang="zh-TW">
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!--取得Selecet資料Function-->
<script>
function getInfo(){
fruit=$('#fruit').val()
fruitName=$('#fruit').find(':selected').text()
showInfo='Val:'+fruit+'|Name:'+fruitName
$('#info').text(showInfo)
}
</script>
</head>
<body>
<!--Select Sample-->
<select id='fruit' onchange='getInfo()'>
<option value=''>-Choose One-</option>
<option value=apple>Apple</option>
<option value=banana>Banana</option>
<option value=lemon>Lemon</option>
</select>
<div>
<label>Info:</label>
<label id='info'></label>
</div>
</body>
</html>
沒有留言:
張貼留言