Front-End/javascript

selectbox in javascript

ducks228 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