JavaScript と jQuery を使用してドロップダウン リストから選択値を取得する
この記事では、標準の JavaScript と jQuery を使用して選択値を取得する方法を説明します。 2つの例を説明します。 最初の例は JavaScript のアプローチを示し、2 番目の例は jQuery を使用しています。
バニラ JavaScript で選択値を取得する
HTML で <select> 要素を定義すると、JavaScript を介してその値にアクセスできます。 これは、JavaScript が要素を操作できるメソッドと関数を提供するためです。
ただし、要素によって異なります。 したがって、すべての <select> 要素について、次を使用してその値にアクセスできます。
selectelement.valueoptionsプロパティとselectedIndex
Selectelement.value を使用して選択値を取得する
<select> 要素には、選択された要素の値を含む value プロパティがあります。 したがって、次のコードの <select> 要素にはいくつかの国があります。
HTML ボタンをクリックすると、select 値が取得されます。 また、<select> 要素の各 <option> には value プロパティがあることに注意してください。
このプロパティを削除するかそのままにするかを選択できます。 同じ結果が得られます。
コード：
<head>
<meta charset="utf-8">
<title>Get Selected Value With Vanilla JS</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<main>
<form>
<label>Pick a food</label>
<select id="select_menu">
<option value="Rice">Rice</option>
<option value="Carrot" selected="selected">Carrot</option>
<option value="Avocado">Avocado</option>
<option value="Banana">Banana</option>
</select>
<button id="submit_button">Get Food Name</button>
</form>
</main>
<script>
let submit_button = document.getElementById("submit_button");
let select_menu = document.getElementById("select_menu")
submit_button.addEventListener("click", function(event) {
// Prevent the submission of the form
event.preventDefault();
var selected_value = "Hooray!, you selected " + select_menu.options[select_menu.selectedIndex].value;
alert(selected_value);
});
</script>
</body>
出力：
options プロパティと selectedIndex を使用して選択値を取得する
<options> プロパティにアクセスすると、selectedIndex プロパティにアクセスできます。 このプロパティは、現在選択されている要素を表します。
また、selectedIndex プロパティには、選択した値を返す value プロパティがあります。
たとえば、次のコードの <select> 要素に食べ物の名前があります。 したがって、食品名を選択してボタンをクリックすると、その値を取得できます。
コード：
<head>
<meta charset="utf-8">
<title>Get Selected Value With Vanilla JS</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<main>
<form>
<label>Where are you from?</label>
<select id="select_menu">
<option value="Germany">Germany</option>
<option value="Ethiopia" selected="selected">Ethiopia</option>
<option value="Romania">Romania</option>
<option>Madagascar</option>
</select>
<button id="submit_button">Get Country Name</button>
</form>
</main>
<script>
let submit_button = document.getElementById("submit_button");
let select_menu = document.getElementById("select_menu")
submit_button.addEventListener("click", function(event) {
// Prevent the submission of the form
event.preventDefault();
var selected_value = "Hello, you are from: " + select_menu.options[select_menu.selectedIndex].value;
alert(selected_value);
});
</script>
</body>
出力：
jQuery で選択値を取得する
jQuery ライブラリは、select 値の取得など、多くの標準的な JavaScript タスクを簡素化します。 一方、バニラの JavaScript で行うのと同じ方法で、jQuery でタスクを解決する義務はありません。
したがって、別のアプローチを取ることができます。 それでも、選択値を取得します。
最初の変更点は、<option> 要素に value プロパティがないことです。 もう 1つの変更点は、選択した要素を取得する方法です。
ここでは、<select> 要素で jQuery .change() API を使用します。 これは、選択するたびに選択値を取得できることを意味します。
コード：
<head>
<meta charset="utf-8">
<title>Get Selected Value With jQuery</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<main>
<form>
<label>Choose a Language</label>
<select id="programming_language">
<option>Swift</option>
<option>Obective-C</option>
<option>Erlang</option>
<option>COBOL</option>
<option>FORTRAN</option>
</select>
</form>
</main>
<script>
$(document).ready(function () {
$('#programming_language').change(function () {
var programming_language = document.getElementById("programming_language");
var selected_value = programming_language.options[programming_language.selectedIndex].value
alert("You selected " + selected_value);
});
});
</script>
</body>
出力：
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn