jQuery 드롭다운에서 선택한 옵션 가져오기

질문자 :William Kinaan

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

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 속성을 추가하기만 하면 됩니다.

Elliot Bonneville

각 옵션에 대한 값 설정

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

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

지금 당신은 호출 할 수 있습니다 $('#aioConceptName').val() 대신 모든이의 :selected 부두는 다른 사람에 의해 제안된다.

Jacob Valenta

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

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

또는 일반적으로:

 $('#id :pseudoclass')

이것은 추가 jQuery 호출을 절약하고 모든 것을 한 번에 선택하며 더 명확합니다(내 의견).

Ed Orsi

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

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

또는 이것을 텍스트로...

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

Vladimir Djuricic

이벤트 컨텍스트에 있는 경우 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() 사용하십시오.

JoDev

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

 var box = document.getElementById('aioConceptName'); conceptName = box.options[box.selectedIndex].text;

JavaScript로 옵션 텍스트/값 얻기 도 참조하십시오.

Roonaan

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

wild_nothing

선택 값(텍스트 아님) 읽기:

 var status = $("#Status").val(); var status = $("#Status")[0].value; var status = $('#Status option:selected').val();

선택을 비활성화하는 방법은 무엇입니까? 두 변형 모두 다음을 사용하여 값을 변경할 수 있습니다.

NS

사용자는 드롭다운과 상호 작용할 수 없습니다. 그리고 그는 다른 옵션이 무엇인지 모릅니다.

 $('#Status').prop('disabled', true);

NS

사용자는 드롭다운에서 옵션을 볼 수 있지만 모두 비활성화되어 있습니다.

 $('#Status option').attr('disabled', true);

이 경우 $("#Status").val() 1.9.0 보다 작은 jQuery 버전 에서만 작동 합니다. 다른 모든 변형이 작동합니다.

비활성화된 선택을 업데이트하는 방법은 무엇입니까?

코드 숨김에서 선택 항목의 값을 계속 업데이트할 수 있습니다. 다음 사용자에 대해서만 비활성화됩니다.

 $("#Status").val(2);

경우에 따라 이벤트를 실행해야 할 수도 있습니다.

 $("#Status").val(2).change();

profimedica

다음 구문을 사용해야 합니다.

 var value = $('#Id :selected').val();

따라서이 코드를 시도하십시오.

 var values = $('#aioConceptName :selected').val();

Fiddle에서 테스트할 수 있습니다. http://jsfiddle.net/PJT6r/9/

이 게시물 에서 이 답변에 대해 참조하십시오.

D.L.MAN

<select id="form-s" multiple="multiple"> <option selected>city1</option> <option selected value="c2">city2</option> <option value="c3">city3</option> </select> <select id="aioConceptName"> <option value="s1" selected >choose io</option> <option value="s2">roma </option> <option value="s3">totti</option> </select> <select id="test"> <option value="s4">paloma</option> <option value="s5" selected >foo</option> <option value="s6">bar</option> </select> <script> $('select').change(function() { var a=$(':selected').text(); // "city1city2choose iofoo" var b=$(':selected').val(); // "city1" - selects just first query ! //but.. var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"] return $(this).text(); }); var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"] return $(this).val(); }); console.log(a,b,c,d); }); </script>

Ol Sen

jQuery를 사용하여 change 이벤트를 추가하고 해당 핸들러 내에서 선택한 값 또는 텍스트를 가져옵니다.

선택한 텍스트가 필요한 경우 다음 코드를 사용하십시오.

 $("#aioConceptName").change(function () { alert($("#aioConceptName :selected").text()) });

또는 선택한 값이 필요한 경우 다음 코드를 사용하십시오.

 $("#aioConceptName").change(function () { alert($("#aioConceptName :selected").attr('value')) });

sanman

jQuery.val() 함수를 사용하십시오.

.val() 메서드는 주로 입력, 선택 및 텍스트 영역과 같은 양식 요소의 값을 가져오는 데 사용됩니다. select 요소의 경우 null 을 반환하고, 하나 이상의 속성이 있고 multiple 속성이 있기 때문에 더 선택할 수 있는 경우 선택한 각 옵션의 값을 포함하는 배열을 반환합니다.

 $(function() { $("#aioConceptName").on("change", function() { $("#debug").text($("#aioConceptName").val()); }).trigger("change"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="aioConceptName"> <option>choose io</option> <option>roma</option> <option>totti</option> </select> <div id="debug"></div>

Salman A

좋은 연습을 위해 val() text() 아닌 선택된 옵션의 값을 얻어야 합니다.

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

당신이 사용할 수있는

 $("#aioConceptName").find(':selected').val();

또는

 $("#aioConceptName :selected").val();

Yusuf Azan

그 최선의 대답이 작동하지 않는다는 것을 알게 된 사람에게는.

사용해보십시오:

 $( "#aioConceptName option:selected" ).attr("value");

최근 프로젝트에서 저에게 효과적이므로 살펴볼 가치가 있습니다.

user2709153

간단하고 매우 쉽습니다.

내 드롭다운

 <select id="aioConceptName"> <option>choose io</option> <option>roma</option> <option>totti</option> </select>

선택한 값을 가져오는 Jquery 코드

 $('#aioConceptName').change(function() { var $option = $(this).find('option:selected'); //Added with the EDIT var value = $option.val(); //returns the value of the selected option. var text = $option.text(); //returns the text of the selected option. });

Juan J

선택한 태그 값 가져오기:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

텍스트 를 얻으려면 다음 코드를 사용하십시오.

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

예를 들어:

 <div id="i_am_parent_of_select_tag"> <select> <option value="1">CR7</option> <option value="2">MESSI</option> </select> </div> <script> $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI </script>

mamal

다음과 같이 작동해야 합니다.

 var conceptName = $('#aioConceptName').val();

d.popov

다음과 같은 방법으로 디버깅을 시도할 수 있습니다.

 console.log($('#aioConceptName option:selected').val())

swathi

나는 이것이 또한 더 잘 이해하는 데 도움이되고 아래에서 이것을 시도하는 데 도움이되기를 바랍니다.

 $('select[id="aioConceptName[]"] option:selected').each(function(key,value){ options2[$(this).val()] = $(this).text(); console.log(JSON.stringify(options2)); });

자세한 내용은 http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/를 참조하십시오.

Vijayaragavan

텍스트 노드 대신 '값' 속성을 가져오려면 다음과 같이 하면 됩니다.

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

Drodarious

다음은 이 문제에 대한 간단한 솔루션입니다.

 $("select#aioConceptName").change(function () { var selectedaioConceptName = $('#aioConceptName').find(":selected").val();; console.log(selectedaioConceptName); });

Sanjaya

이것을 시도

 $(document).ready(function() { $("#name option").filter(function() { return $(this).val() == $("#firstname").val(); }).attr('selected', true); $("#name").live("change", function() { $("#firstname").val($(this).find("option:selected").attr("value")); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <select id="name" name="name"> <option value="">Please select...</option> <option value="Elvis">Elvis</option> <option value="Frank">Frank</option> <option value="Jim">Jim</option> </select> <input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

Haris Sultan

$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

인덱스가 있는 배열로 DDL을 상상해 보십시오. 하나의 인덱스를 선택하는 것입니다. JS로 설정하려는 것을 선택하십시오.

Satista

1. 선택한 옵션 text 를 얻으려면 .text() 사용할 수 있습니다.

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

2. 선택한 옵션 값 을 얻으려면 .val() 사용할 수 있습니다.

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

   다음과 같이 value 속성을 <option> 태그로 설정해야 합니다.

    <select id="aioConceptName"> <option value="">choose io</option> <option value="roma(value)">roma(text)</option> <option value="totti(value)">totti(text)</option> </select>

이 HTML 코드 샘플을 사용하여 마지막 옵션이 선택 되었다고 가정합니다.

1. var text 는 당신에게 totti(text)
2. var val totti(value) 줄 것입니다.

 $(document).on('change','#aioConceptName' ,function(){ var val = $('#aioConceptName option:selected').val(); var text = $('#aioConceptName option:selected').text(); $('.result').text("Select Value = " + val); $('.result').append("<br>Select Text = " + text); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="aioConceptName"> <option value="io(value)">choose io</option> <option value="roma(value)">roma(text)</option> <option value="totti(value)">totti(text)</option> </select> <p class="result"> </p>

NcXNaV

$("#drpList").val();

Praveen Patel G

동일한 class= name으로 선택을 가져오려면 선택 옵션이 선택되었는지 확인하기 위해 이 작업을 수행할 수 있습니다.

 var bOK = true; $('.optKategorien').each(function(index,el){ if($(el).find(":selected").text() == "") { bOK = false; } });

Bludau Media

나는 같은 문제가 있었고 내 경우에 작동하지 않는 이유를 알아 냈습니다.
select 의 동일한 ID를 전달하는 다른 입력 필드가 있음을 발견했습니다. 이로 인해 val() 이 항상 비어 있습니다.
나는 이것이 비슷한 문제가있는 사람을 위해 하루를 저장하기를 바랍니다.

Hasnaa Ibraheem

노력하다

 aioConceptName.selectedOptions[0].value 

 let val = aioConceptName.selectedOptions[0].value console.log('selected value:',val);

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

Kamil Kiełczewski

선택한 옵션을 찾는 올바른 방법은 option value 속성으로 한 가지뿐입니다. 따라서 간단한 코드를 사용하십시오.

 //find selected option $select = $("#mySelect"); $selectedOption = $select.find( "option[value=" + $select.val() + "]" ); //get selected option text console.log( $selectedOption.text() );

따라서 다음과 같은 목록이 있는 경우:

 <select id="#mySelect" > <option value="value1" >First option</option> <option value="value2" >Second option</option> <option value="value3" selected >Third option</option> </select>

option 에 selected 속성을 사용하는 경우 사용자가 다른 옵션을 선택하더라도 selected 속성이 option find(":selected") 잘못된 결과를 제공합니다.

사용자가 첫 번째 또는 두 번째 옵션을 선택하더라도 $("select option:selected") 의 결과는 두 개의 요소 를 제공합니다! 따라서 $("select :selected").text()는 " 첫 번째 옵션 세 번째 옵션 "과 같은 결과를 제공합니다.

따라서 value 속성 선택기를 사용하고 모든 옵션에 대해 value 속성을 설정하는 것을 잊지 마십시오!

Oleg Lysyakov

아마도 이런 종류의 시나리오에서 가장 좋은 방법은 jQuery의 변경 방법 을 사용하여 다음과 같이 현재 선택된 값을 찾는 것입니다.

 $('#aioConceptName').change(function(){ //get the selected val using jQuery's 'this' method and assign to a var var selectedVal = $(this).val(); //perform the rest of your operations using aforementioned var });

주어진 선택 필드에서 선택한 각 옵션에 대한 기능을 수행할 수 있기 때문에 이 방법을 선호합니다.

도움이 되기를 바랍니다!

Werner ZeBeard Bessinger

출처 : http:www.stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown