값을 기준으로 선택 옵션 텍스트 받기

Question

나는 메뉴가 있습니다. 주어진 가치가 주어지면 나는 그 텍스트를 돌려주고 싶다. 예를 들어 0은 "0"을 반환하고 1은 "하나"를 반환합니다. 현재 어떤 옵션이 선택되어 있는지 신경 쓰지 않고 메뉴를 자동 선택하고 싶지만 select 메뉴를 원시 데이터베이스. 각 옵션을 반복하지 않고도 JavaScript 또는 jQuery로 쉽게이 작업을 수행 할 수 있습니까?

<select> 
<option value="0">zero</option> 
<option value="1">one</option> 
<option value="2">two</option> 
<option value="3">three</option> 
</select> 

감사

Answer 1

을 대신의를 사용하여 select 데이터베이스로 (간단한 조회를 위해 값 비싼 작업이 필요함), 한 번 데이터 세트를 만든 다음 사용하십시오.

var vals = $('select option').map(function(i, el) { return el.text; }) 
          .toArray(); 
alert(vals[2]); // "two" 

---

또는 option 값이 0 기반 인덱스를 순차적하지 않는 경우, 다음 개체를 사용 ...

var vals = {}; 

$('select option').each(function(i, el) { vals[el.value] = el.text }); 

alert(vals[2]); // "two" 

Answer 2

를 사용하여 속성 - 동일 선택 :

var valToSearchFor = 0; 
    textFromOption = $('select option[value="' + valToSearchFor + '"]').text(); 

이 아직도 당신이 찾고있는 값의 존재를 테스트하기 위해 모든 option을 반복하지만, 그것은 것입니다 당신이 할 필요가 없도록 '장면 뒤에서'그렇게하십시오.

querySelectorAll()를 사용할 수있는 가능성이 (jQuery를 위 등 더 많거나 적은 같은 표기법 불구하고)있다는 :

var valToSearchFor = 0; 
    textFromOption = document.querySelectorAll('option[value="' + valToSearchFor + '"]').innerHTML; 

이, 물론, 브라우저가 모든 할 (IE를 querySelectorAll() 구현, 그리고해야 특별히).

참고 :

• attribute-equals [attribute="value"] selector.
• document.querySelectorAll().

Answer 3

var value = '3'; 
alert($('select option[value=' + value + ']').text()); 

Live demo. 당신이있는 경우에 다수의 드롭 다운 선택기가 작동하지 않습니다 나열하기 때문에

은 또한 당신은 선택을 ID를 선택을 제공하고 업데이트 할 수 있습니다

alert($('#id_of_the_select option[value=' + value + ']').text()); 

Answer 4

는 selected: 선택기를 사용합니다. 페이지에 오른쪽에 주어진 예제.

http://api.jquery.com/selected-selector/

$("select").change(function() { 
     var str = ""; 
     $("select option:selected").each(function() { 
      str += $(this).text() + " "; 
      }); 
     $("div").text(str); 
    }) 
    .trigger('change'); 

당신이 각 옵션을 반복하지 않고 값을 검색 할 어떻게 다른

http://jsfiddle.net/ckaufman/aDU5E/1/

Answer 5

트리거하려고하는 이벤트와 "DIV"를 대체? 당신을 위해 그것을하는 마법 재산은 없습니다.

그러나이 코드를 사용할 수 있습니다

(function() { 
    var sels = document.getElementsByTagName('select'), l = sels.length, i, 
     opts, m, j, o; 
    for(i=0; i<l; i++) { 
     o = {}; 
     opts = sels[i].options; 
     m = opts.length; 
     for(j=0; j<m; j++) o[opts[j].value] = opts[j].text; 
     sels[i].map = o; 
    } 
})(); 

에 담기 직전 </body>을, 지금 당신은 당신의 페이지에있는 모든 <select>의지도를 찾을 수 있습니다

var sel = document.getElementById('mySelect'); 
alert(sel['0']);