#javascript #select #selectedIndex

<select id="abcde">
    <option value="1" selected="">100%</option>
    <option value="0.9">90%</option>
    <option value="0.8">80%</option>
    <option value="0.7">70%</option>
    <option value="0.6">60%</option>
    <option value="0.5">50%</option>
    <option value="0.4">40%</option>
    <option value="0.3">30%</option>
    <option value="0.2">20%</option>
    <option value="0.1">10%</option>
</select>

다음과 같은 select 태그와 option 태그가 있다고 하자.

 

그러면 다음과 같은 select박스가 생길 것 이다.

 

---

 

 

여기서 option태그의 text를 추출하고 싶다면

 

$("#abcde").options[i].text;

 를 사용하면 된다. i는 정수이며, 0부터 시작한다.

for문을 통해 option태그의 모든 text를 꺼낼 수도 있다.

 

결과값은

100%
  90%
  80%
  70%
  60%
  50%
  40%
  30%
  20%
  10%

가 나온다

 

---

option태그의 value값을 추출하고 싶다면

$('#abcde').options[i].value;

를 쓰면 된다. 

for문을 통해 모두 가져올 수 있다.

결과값은 

1
  0.9
  0.8
  0.7
  0.6
  0.5
  0.4
  0.3
  0.2
  0.1

가 나온다.

 

 

---

만약에 javascript에서 임의로 

선택된 option을 바꾸고 싶다면 어떻게 해야할까?

(현재는 option태그중 100%, value="1" 인 option이 selected 되어 있다)

 

$('#abcde').selectedIndex = i;

i는 정수(0부터 시작)이며 보통은 큰따옴표 안에 쓴다

하지만 i가 변수일경우,

큰따옴표안에 변수가 적용되려면 역슬래시(\")를 써야하는 번거로움때문에

그냥 i로 적어줬는데 사용이 됬다.

 

$('#abcde').selectedIndex = "3";

위 코드의 결과는

다음과 같이 selected된 option이 바뀐다.