JavaScript 및 jQuery를 사용하여 드롭다운 목록에서 선택 값 가져오기
이 기사에서는 바닐라 JavaScript 및 jQuery를 사용하여 선택 값을 얻는 방법을 설명합니다. 두 가지 예를 설명하겠습니다. 첫 번째는 JavaScript 접근 방식을 보여주고 두 번째 예는 jQuery를 사용합니다.
Vanilla JavaScript로 선택 값 얻기
HTML에서 <select> 요소를 정의하면 JavaScript를 통해 해당 값에 액세스할 수 있습니다. JavaScript는 요소를 조작할 수 있는 메서드와 함수를 제공하기 때문입니다.
그러나 요소에 따라 다릅니다. 따라서 모든 <select> 요소에 대해 다음을 사용하여 해당 값에 액세스할 수 있습니다.
selectelement.valueoptions속성 및selectedIndex
Selectelement.value를 사용하여 선택 값 가져오기
<select> 요소에는 선택한 요소의 값을 포함하는 value 속성이 있습니다. 따라서 다음 코드의 <select> 요소에 일부 국가가 있습니다.
HTML 버튼을 클릭하면 선택 값이 표시됩니다. 또한 <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 라이브러리는 선택 값 가져오기를 포함하여 많은 바닐라 JavaScript 작업을 단순화합니다. 한편, jQuery에서는 바닐라 JavaScript에서와 같은 방식으로 작업을 해결할 의무가 없습니다.
따라서 우리는 다른 접근 방식을 취할 수 있습니다. 여전히 선택 값을 얻습니다.
첫 번째 변경 사항은 <option> 요소에 value 속성이 없다는 것입니다. 또 다른 변경 사항은 선택한 요소를 가져오는 접근 방식입니다.
여기서는 <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