javascript 셀렉트박스(SelectBox) 바로실행

웹페이지에서 선택박스 일명 셀렉트박스(SelectBox) 를 클릭할때마다 검색조건이 바뀌거나

페이지가 바뀌거나 하는걸 보셨을겁니다

기본적인 것이지만 경험해본적이 없으면 어떤방식으로 하는지 알기힘든부분입니다

간단하게 예제 몇가지를 통하여 알아보겠습니다

1. Question

선택을 할 수 있도록 셀렉트 박스를 만들었습니다. 샐랙트 박스에서 년도를 선택하면 바로 화면이 년도에 맞춰서 바로바로 바꿔주고 싶습니다.  function으로 하는거 같은 어찌해야 할가요?

<select name="searchYear" id="searchYear">
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>

2. Example1

<select name="searchYear" id="searchYear" onchange="펑션명()">
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>

3. Example2

$("#searchYear").change(function(){
    var yearVal =  $(this).val();
})

w

두가지 방법이 있는데

예제1 처럼 onchange 이벤트에 함수를 걸어주거나

change 이벤트를 태우는 방법이있습니다

방법은 여러가지이지만 개발시에는 둘중 한가지만으로 통일해서 개발하는것이 가독성에 좋습니다

적용해보시길 바랍니다

[javascript] selectbox 선택에 따라 두번째 selectbox 값 변화

selectbox의 선택에 따라 두번째 selectbox의 값이 변해야하는 경우가 있습니다.

지역 선택을 해야할 때나 품목 선택을 해야할 때가 그런 경우죠.

이때 사용하게 되는 것이, 해당하는 객체 값이 변할 때 발생하는 이벤트 함수인 onchange라는 함수입니다.

예제를 먼저 살펴볼까요. 먼저  html 부분에 해당 예제소스를 넣어주세요. 

1 2 3 4 5 6 7 8 9 10

<select onchange="categoryChange(this)">   <option>걸그룹을 선택해주세요</option>   <option value="a">블랙핑크</option>   <option value="b">에프엑스</option>   <option value="c">EXID</option> </select>   <select id="good"> <option>좋아하는 멤버를 선택해주세요</option> </select>

지극히 개인취향적인 걸그룹이 담긴 selectbox에 내용을 담고 다음에 javascript 스크립트를 넣어주면 완성입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function categoryChange(e) {   var good_a = ["지수", "제니", "로제", "리사"];   var good_b = ["빅토리아", "엠버", "루나", "크리스탈"];   var good_c = ["LE", "하니", "정화", "혜린", "솔지"];   var target = document.getElementById("good");     if(e.value == "a") var d = good_a;   else if(e.value == "b") var d = good_b;   else if(e.value == "c") var d = good_c;     target.options.length = 0;     for (x in d) {     var opt = document.createElement("option");     opt.value = d[x];     opt.innerHTML = d[x];     target.appendChild(opt);   } }

단지 value값만을 가져온다면 단순히 document.getElementByName("selBox").value   <---이렇게만 해줘도 된다.
그렇지만 "한국","미국","중국"처럼 내용값을 가져오려면

ex) 
<select name="selBox">
  <option value="1">한국</option>    <--0번째값
  <option value="2">미국</option>    <--1번째값  
  <option value="3">중국</option>    <--2번째값

</select>


document.getElementByName("selBox")[document.getElementByName("selBox").selelctedIndex].text
*만약2번을 선택한경우 selBox[1]번째의 text값을 가져오는것이다.

출처: http://sepiroth11.tistory.com/entry/자바스크립트select박스의-valuetext값을-얻어오기 [세피로스's 이야기]