콤보박스에서 출력하기 - selectIndex

콤보박스를 선택해서 input이 아닌 div에 출력하고 싶을때.

 

select태그를 알게되었고, selectIndex라는 속성을 알게되었다.

 

하나다보면 이 태그에 내가 선택한 태그에 속서이 뭐가 있는지 궁금할때는 변수 지정하고 consol.log가 아니라

 

console.dir를 하면 종류를 알수있다.

 

 

<script>
      function heejung_select(){
         var d = document.getElementById("heeselect");
            console.dir(d); //d에 종류가 모가 있는지보자.
        /* var displaytext = d.options[2];//Cricket만선택된다. 근데 임의의 선택이 되게하려면? 배열로 넣으려면??
        var displaytext = d.options[3];//Cricket만선택된다. 근데 임의의 선택이 되게하려면? 배열로 넣으려면??
        var displaytext = d.options[4];//Cricket만선택된다. 근데 임의의 선택이 되게하려면? 배열로 넣으려면??
       console.log(displaytext); */
      
       var displaytext = d.options[d.selectedIndex].text; //text가 저장된다. Rugby,Cricket...
       console.log(displaytext); //콘솔에 찍힌다. 이제 input자리에 넣으면된다.

       /* document.getElementById('textvalue').value = displaytext;   input에 넣을때사용.*/
       document.getElementById('textvalue').innerText = displaytext; //div에 넣을때 사용
      } 
</script>
<select id="heeselect" onchange="heejung_select();">
      <option>---Select options</option>
      <option>Rugby</option>
      <option>Cricket</option>
      <option>Swimming</option>
      <option>Volleyball</option>
   </select>  

   <!-- <inputdi type="text" id="textvalue"/> input 찍힌다.-->
   <div id="textvalue"></div>

 var d = document.getElementById("heeselect");

--> console.dir(d);  콘솔창을 보면 많은 value가 있다 그 중에 내가 찾던 것이 나왔다.

selectIndex!

 

var displaytext = d.options[2];

콘솔창에서 보면 Cricket만 선택이 됨을 알수있다. 여기에서 options도 하나의 속성이구나.

그러면 2가아니라 내가 선택한것이 무엇이든 간에 [ ]  안에 넣으려면 어떻게 표현을 해야하지...

 

var displaytext = d.options[d.selectedIndex].text; // text가 저장된다. Rugby,Cricket...

e.selectIndex
선택한 항목의 index값을 가져온다.

 

e.options

콤보박스의 선택목록(options) element 목록을 가져온다.

 

e.optins[e.selectedIndex]

사용자가 선택한 항목의 index를 사용하여 

콤보박스의 선택목록에서 사용자가 선택한 콤보박스 선택항목 element을 가져온다.

 

e.options[e.selectedIndex].text

마지막으로 선택된 element의 text 값을 가져온다.

 

e.options[e.selectedIndex].value

마지막으로 선택된 element의 value값을 가져온다.

 

출처https://hianna.tistory.com/437

[Javascript] 콤보박스(select)에서 선택한 값, 텍스트 출력하기