ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • selectbox in javascript
    Front-End/javascript 2018. 11. 1. 18:47

    <select id="mySelect" name="mySelect">

      <option>Apple</option>

      <option>Pear</option>

      <option>Banana</option>

      <option>Orange</option>

    </select>


    1. id로 값 세팅하기

    var x = document.getElementById("mySelect");

    x.selectedIndex = 1;   -> Pear값이 세팅됨


    2. id로 선택된 값 가져오기

    var x = document.getElementById("mySelect");

    var indexS = x.selectedIndex;

    console.log( x.value );  -> Pear

    console.log( x.options[indexS].text );    -> Pear

    console.log( x.text ); -> undefined 



    3. name으로 값 세팅하기

    var y = document.getElementsByName("mySelect")[0];

    y.selectedIndex = 2; -> Banana


    4. name으로 값 가져오기

    var z = document.getElementsByName("mySelect")[0];

    var indexS = z.selectedIndex;

    console.log( z.options[indexS].value );  -> Banana

    console.log( z.options[indexS].text );    -> Banana


    5. option 추가하기

    var x = document.getElementById("mySelect");

    var opt = document.createElement('option');

    opt.value='Mango';

    opt.text = 'Mango';

    x.add(opt);


    6.option 지우기

    var x = document.getElementById("mySelect");

    x.options.length=1; -> Apple 만 남는다.



    출처

    https://www.w3schools.com/jsref/dom_obj_select.asp

    댓글

Designed by Tistory.