-
selectbox in javascriptFront-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 만 남는다.
출처