jQuery는 선택된 옵션 값을 얻는다 (텍스트가 아니라 속성 'value')

좋아, 나는이 코드를 가지고있다 :

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

그리고 옵션의 가치를 선택하고 싶습니다. 예 : '옵션 2'가 선택되었으며 값은 '2'입니다. '2'는 '옵션 2'가 아니라 얻는 데 필요한 값입니다.

04/2020 : 기존 답변 수정

사용 선택 : 선택한 옵션에 사이비 선택을 한 후 사용 .val 옵션의 값을 얻을 기능.

$('select[name=selector] option').filter(':selected').val()

참고 : :selected첫 번째 쿼리에서 직접 선택기 를 사용하는 것보다 필터를 사용하는 것이 좋습니다 .

변경 처리기 안에있는 경우 this.value선택한 옵션 값을 얻기 위해 간단히 사용할 수 있습니다 . 더 많은 옵션은 데모를 참조하십시오.

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

이전 답변 :

편집 : 지적한대로 선택한 옵션 값을 반환하지 않습니다.

~~ .val 을 사용 하여 선택한 옵션의 값을 가져옵니다. 아래를 참조하십시오

$('select[name=selector]').val()~~

난 그냥 내 경험을 공유하고 싶었어

나를 위해

$('#selectorId').val()

null을 반환했습니다.

나는 사용해야했다

$('#selectorId option:selected').val()

$('select').change(function() {
    console.log($(this).val())
});​

jsFiddle 예제

.val() 가치를 얻습니다.

선택에 ID를 추가해야합니다. 그때:
$('#selectorID').val()

이 시도:

$(document).ready(function(){
    var data= $('select').find('option:selected').val();
});

또는

var data= $('select').find('option:selected').text();

jquery다음과 같이 사용할 수 있습니다

스크립트

  $('#IDOfyourdropdown').change(function(){
    alert($(this).val());
  });

FIDDLE은 여기

이와 같은 선택

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option id="0">CHOOSE AN OPTION</option>
   <option id="127">John Doe</option>
   <option id="129" selected>Jane Doe</option>

...이 방법으로 ID를 얻을 수 있습니다 :

$('#list-name option:selected').attr('id');

또는 가치를 대신 사용하여 쉽게 얻을 수 있습니다.

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option value="0">CHOOSE AN OPTION</option>
   <option value="127">John Doe</option>
   <option value="129" selected>Jane Doe</option>

이처럼 :

$('#list-name').val();

내 옵션 중 하나에 값이 없습니다 <option>-----</option>. 사용하려고 if (!$(this).val()) { .. }했지만 이상한 결과를 얻었습니다. 요소에 value속성 이 없으면 <option>빈 문자열 대신 그 안에 텍스트를 반환합니다. val()옵션에 대해 아무것도 반환 하지 않으려면 을 추가하십시오 value="".

예를보십시오 :

    <select class="element select small" id="account_name" name="account_name"> 

        <option value="" selected="selected">Please Select</option>           
        <option value="paypal" >Paypal</option>
        <option value="webmoney" >Webmoney</option>

    </select>

 <script type="text/javascript">

        $(document).ready(function(){ 
             $('#account_name').change(function(){
               alert($(this).val());                                                          
             });
        });
 </script>

$('#selectorID').val();

또는

$('select[name=selector]').val();

또는

$('.class_nam').val();

이 코드는 저에게 매우 효과적입니다. 선택한 옵션의 값을 반환합니다. $ ( '# select_id'). find ( 'option : selected'). val ();

 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });

소스 링크

사용 jQuery를 발은 () 하는 GET 값과 선택된 텍스트를 () 옵션의 텍스트를 얻을 수 있습니다.

    <select id="myDropDown" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

선택 드롭 다운에서 이벤트 변경

        $("#myDropDown").change(function () {

            // Fetching Value
            console.log($(this).val());

            // Fetching Text
            console.log($(this).find('option:selected').text());

            alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
        });

버튼 클릭

        $("button").click(function () {

        // Fetching Value
            console.log($("#myDropDown").val());

    // Fetching Text
            console.log($('#myDropDown option:selected').text());

            alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
        });