select box value 가지고오는법

Hoo·2023년 5월 15일
0
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);
}) 

profile
기록하는중입니다.

0개의 댓글