드롭 다운에서 jQuery 선택 옵션 가져 오기를 사용 하는데 안됩니다. 이유가 있을까요?

일반적으로 $("#id").val()선택한 옵션의 값을 반환하는 데 사용 하지만 이번에는 작동하지 않습니다. 선택한 태그에는 ID가 있습니다

html 코드

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>


답변

드롭 다운 옵션의 경우 다음과 같은 것을 원할 것입니다.

var conceptName = $('#aioConceptName').find(":selected").text();

val()트릭을 수행하지 않는 이유 는 옵션을 클릭해도 드롭 다운 값이 변경되지 않기 때문입니다. 드롭 다운 :selected하위 항목 인 선택한 옵션에 속성을 추가 하기 만합니다.


답변

각 옵션의 값을 설정하십시오

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()속성을 .val()반환 하기 때문에 작동하지 않았습니다 value. 제대로 작동하려면 value각에 속성을 설정해야합니다 <option>.

이제 다른 사람들이 제안한 $('#aioConceptName').val()이 모든 :selected부두 대신에 전화 할 수 있습니다.


답변

나는이 질문을 우연히 발견하고보다 간결한 Elliot BOnneville의 답변을 개발했습니다.

var conceptName = $('#aioConceptName :selected').text();

또는 일반적으로 :

$('#id :pseudoclass')

이것은 당신에게 여분의 jQuery 호출을 저장하고 한 번에 모든 것을 선택하며 더 명확합니다 (내 의견).


답변

가치를 위해 이것을 시도하십시오 …

$("select#id_of_select_element option").filter(":selected").val();

또는이 텍스트에 대한 …

$("select#id_of_select_element option").filter(":selected").text();

답변

이벤트 컨텍스트에있는 경우 jQuery에서 다음을 사용하여 선택한 옵션 요소를 검색 할 수 있습니다
$(this).find('option:selected').

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

편집하다

PossessWithin 에서 언급했듯이 내 대답은 질문에 대한 답변입니다 : 선택한 “옵션”을 선택하는 방법.

다음으로 옵션 값을 얻으려면을 사용하십시오 option.val().


답변

평범한 오래된 자바 스크립트 사용을 고려 했습니까?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

참조 자바 스크립트와 옵션 텍스트 / 값을 얻기


답변

$('#aioConceptName option:selected').val();