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

일반적으로 $("#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의 하위 항목 인 선택한 옵션에 속성을 추가 하기 만합니다.

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

<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();

선택의 값 (텍스트가 아닌)을 읽는 것 :

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

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

ㅏ

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

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

비

드롭 다운에서 옵션을 볼 수 있지만 모든 옵션이 비활성화되어 있습니다.

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

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

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

코드 뒤에서 선택한 값을 계속 업데이트 할 수 있습니다. 사용자 만 사용할 수 없습니다.

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

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

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

<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>

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

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

따라서이 코드를 사용해보십시오 :

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

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

이 게시물 에서이 답변에 대해보십시오

jQuery를 사용하여 change이벤트를 추가하고 해당 핸들러 내에서 선택된 값 또는 텍스트를 가져 오십시오.

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

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

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

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

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>

최고의 답변을 찾은 사람에게는 효과가 없습니다.

사용하십시오 :

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

최근 프로젝트에서 나를 위해 일하므로 그것을 볼 가치가 있습니다.

그냥 작동해야합니다.

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

간단하고 쉽게 :

드롭 다운

<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.
});

이 방법으로 디버깅을 시도 할 수 있습니다.

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

선택한 태그 값 가져 오기 :

 $('#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>

텍스트 노드 대신 'value'속성을 가져 오려면 다음을 수행하십시오.

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

이것을 시도하십시오

$(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">

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

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

이것이 더 잘 이해하고 아래에서 시도해 볼 수 있기를 바랍니다.

$('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/ 를 참조하십시오

당신이 사용할 수있는 $("#drpList").val();

동일한 class = 이름으로 선택을 가져 와서 선택 옵션이 선택되어 있는지 확인하십시오.

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

저도 같은 문제를했고 나는 그것이 내 경우에 작동하지 않는 이유를 알아 냈
HTML 페이지가 다른 HTML 조각으로 나뉘어 있었고, 난 내가의 동일한 ID 운반 다른 입력 필드가 발견 select(가) 발생, val()항상 비어를
나는 이것이 비슷한 문제를 가진 사람이라면 하루를 절약 할 수 있기를 바랍니다.

$ ( "# id"). val을 사용하려면 다음과 같이 옵션에 값을 추가해야합니다.

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

그렇지 않으면, 당신은 사용할 수 있습니다

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

도움이 되길 바랍니다 ..

이 문제에 대한 간단한 해결책은 다음과 같습니다.

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

아마도 이런 종류의 시나리오에서 가장 좋은 방법은 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

});

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

희망이 도움이됩니다!

일반적으로 선택한 값을 얻을뿐만 아니라 몇 가지 작업을 실행해야합니다. 그렇다면 모든 jQuery 매직을 피하고 선택한 값을 액션 호출의 인수로 전달하십시오.

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>

정확하게 선택한 옵션을 사용하여 선택할 수 있습니다 : 아래는 innerText를 제공합니다

$("select#aioConceptName > option:selected").text()

아래는 당신에게 가치를 줄 것입니다.

$("select#aioConceptName > option:selected").val()