「jQuery」option:selectedでセレクトボックスの選択文字を取得する
環境
jquery3.6.0
Google Chrome 100.0.4896.127
書式
<input type="button" id="ボタンid名" value="ボタン名" />
$(“#ボタンid名").click(function() {
const 変数名 = $(“#セレクトボックスのid名 option:selected").text();
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="city">
<option value="tokyo">東京</option>
<option value="oosaka">大阪</option>
<option value="fukuoka">福岡</option>
</select>
<p>
<input type="button" id="btncity" value="選択" /></p>
<script>
$("#btncity").click(function() {
// 選択項目
const res = $("#city option:selected").text();
$("#show").text(res);
});
</script>
</head>
<body>
<p>選択した都市: <span id="show"></span></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="city">
<option value="tokyo">東京</option>
<option value="oosaka">大阪</option>
<option value="fukuoka">福岡</option>
</select>
<p>
<input type="button" id="btncity" value="選択" /></p>
<script>
$("#btncity").click(function() {
// 選択項目
const res = $("#city option:selected").text();
$("#show").text(res);
});
</script>
</head>
<body>
<p>選択した都市: <span id="show"></span></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="city">
<option value="tokyo">東京</option>
<option value="oosaka">大阪</option>
<option value="fukuoka">福岡</option>
</select>
<p>
<input type="button" id="btncity" value="選択" /></p>
<script>
$("#btncity").click(function() {
// 選択項目
const res = $("#city option:selected").text();
$("#show").text(res);
});
</script>
</head>
<body>
<p>選択した都市: <span id="show"></span></p>
</body>
</html>
結果
セレクトボックスの値「大阪」を選択し、「選択」ボタンを押下後、「選択した都市: 福岡」が表示されます