HTML
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2">
<option value="1" selected>모자</option>
<option value="2">셔츠</option>
</select>
<select class="form-select2 mt-2" style="display: none;">
<option value="3">모자</option>
<option value="4">셔츠</option>
</select>
</form>
SELECTBOX VALUE 및 Text 가지고 오는 법(JavaScript)
let sel = document.querySelector(".form-select");
sel.addEventListener("change", function () {
let val = sel.options[sel.selectedIndex].value; //셀렉트박스 value 가지고오는법
if (val == 1) {
document.querySelector(".form-select2").style.display = "block";
}
})
SELECTBOX VALUE 및 Text 값 변경하는 법 (JavaScript)
- 첫번째 셀렉트박스 val값이 3인 값을 선택하면 숨겨놓았던 셀렉트박스 보여지면서 text값 변경하기
let sel = document.querySelector(".form-select");
sel.addEventListener("change", function () {
let val = sel.options[sel.selectedIndex].value;
console.log(sel.options[sel.selectedIndex].text);
if (val == 1) {
document.querySelector(".form-select2").style.display = "block";
} else if (val == 3) {
document.querySelector(".form-select2").style.display = "block";
document.querySelector(".form-select2").options[0].text = 28;
document.querySelector(".form-select2").options[1].text = 30;
}
})
SELECTBOX VALUE 및 Text 가지고 오는 법( Jquery )
$(".form-select").on("change", function () {
let a = $(".form-select option:selected").val();
let a = $(".form-select option:selected").text();
console.log(a);
})