jQuery를 사용하여 드롭 다운 항목의 선택된 값 가져 오기

443

jQuery를 사용하여 드롭 다운 상자의 선택된 값을 얻으려면 어떻게해야합니까?
나는 사용하려고

var value = $('#dropDownId').val();

과

var value = $('select#dropDownId option:selected').val();

그러나 둘 다 빈 문자열을 반환합니다.

jquery 
— 쉬얌
소스
3
둘 다 작동해야합니다. 문제는 다른 곳에 있어야합니다 (예 : 코드가 $(document).ready(...블록에 싸여 있습니까?)
— karim79
4
var value = $('#dropDownId:selected').val();
— 개미
2
아니요- $('#dropDownId').val();선택한 값을 얻는 가장 간결한 방법입니다.
— karim79
1
@shyam ID는 문서마다 고유하므로이 문장에서 선택하지 않아도됩니다. 클래스를 참조 할 때만 태그 이름을 사용해야합니다 select#dropDownId option:selected.
— ant
— Chris Moschini

답변:

840

단일 선택 돔 요소의 경우 현재 선택된 값을 가져 오려면 다음을 수행하십시오.

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

현재 선택된 텍스트를 얻으려면 :

$('#dropDownId :selected').text();
— 피터 맥그
소스
11
당신은 전에 공간이 필요합니다 :selected.
— interjay
53
빠른 선택한 옵션의 텍스트를 가져 오는 방법은 다음과 같습니다$("#dropDownId").children("option").filter(":selected").text()
— RickardN
3
참조 .val()및 링크를 공유했으면합니다..text()
— shareef
8
Richard, 코드가 너무 길어서 가독성이 훨씬 간결 할 수 있습니다.
— PositiveGuy
2
@JamesM. 변수에 DOM 참조를 저장할 수 있습니까? 그런 다음jQuery(domVariable).val()
— Allen Linatoc
57 
var value = $('#dropDownId:selected').text()

제대로 작동하려면 다음 예제를 참조하십시오.

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />
스 니펫 확장

— 닉 리브
소스
4
"값"은 대부분의 코더들이 놓친 것인데, 요소와 쿼리를 선언하는 대신 텍스트를 계속 반환합니다
— Asad
데모를 여기에서 확인하십시오 freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html
— Code Spy
22

이 jQuery를 사용해보십시오.

$("#ddlid option:selected").text();

또는이 자바 스크립트

 var selID=document.getElementById("ddlid");
 var text=selID.options[selID.selectedIndex].text;

텍스트가 아닌 값에 액세스해야하는 경우 val()대신 대신 method를 사용하십시오 text().

아래의 바이올린 링크를 확인하십시오.

데모 1 | Demo2

— 럭키
소스
14

이 시도

$("#yourDropdown option:selected").text();
— 크 바디야 타르
소스
OP가 선택된 값을 요구하고 있습니다. 이 답변은 드롭 다운의 텍스트 내용을 얻습니다. 그가 요구 한 것이 아니라 잘못된 것이 아닙니다.
— Joshua Dance
12

나는 이것이 굉장히 오래된 게시물이라는 것을 알고 아마도이 불쌍한 부활을 위해 모호해야하지만, 나는 내 무기고의 모든 응용 프로그램에서 사용하는 매우 유용한 작은 JS 스 니펫을 공유 할 것이라고 생각했습니다 ...

입력하는 경우 :

$("#selector option:selected").val() // or
$("#selector option:selected").text()

나이가 들어감에 따라 작은 *.js파일을 전역 파일에 추가 하십시오.

function soval(a) {
    return $('option:selected', a).val();
}
function sotext(a) {
    return $('option:selected', a).text();
}

그냥 쓰기 soval("#selector");또는 sotext("#selector");대신! 둘을 결합하고 value와 text!

function so(a) {
    my.value = $('option:selected', a).val();
    my.text  = $('option:selected', a).text();
    return my;
}

특히 폼이 많은 응용 프로그램에서 소중한 시간을 절약 할 수 있습니다!

— DevlshOne
소스
9

선택한 값을 알려줍니다. JQuery 코드 ...

$(document).ready(function () {

        $("#myDropDown").change(function (event) {
            alert("You have Selected  :: "+$(this).val());
        });
    });

HTML 코드 ...

<select id="myDropDown">
        <option>Milk</option>
        <option>Egg</option>
        <option>Bread</option>
        <option>Fruits</option>
    </select>
— 유 타야
소스
8

또 다른 테스트 된 예 :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#bonus').change(function() {
    alert($("#bonus option:selected").text());
  });  
});
</script>
</head>

<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>
— J 슬릭
소스
4

이것을 시도하면 값을 얻습니다.

$('select#myField').find('option:selected').val();

— 엥겔로 리고
소스
3

선택 요소에 ID를 제공 했습니까?

<select id='dropDownId'> ...

첫 번째 진술은 효과가 있습니다!

— 샤 첼레
소스
3

선택된 텍스트 사용 :

value: $('#dropDownId :selected').text();

선택된 값 사용 :

value: $('#dropDownId').val();
— 마히
소스
2

id즉의 제어 아래로 강하를 생성있어 html동적 될 것 하나. 완전한 ID를 사용하십시오 $('ct100_<Your control id>').val().. 작동합니다.

— VenkeHV
소스
2

또는 당신이 시도한다면 :

$("#foo").find("select[name=bar]").val();

나는 오늘 그것을 사용했고 잘 작동했다.

— 고체
소스
2

사용하다

$('#dropDownId').find('option:selected').val()

이것은 작동해야합니다 :)

— 나 밀라
소스
2

드롭 다운에서 jquery 값을 얻으려면 방금 보낸 아래 함수를 사용 id하고 선택한 값을 가져옵니다.

function getValue(id){
    var value = "";
    if($('#'+id)[0]!=undefined && $('#'+id)[0]!=null){
        for(var i=0;i<$('#'+id)[0].length;i++){
            if($('#'+id)[0][i].selected == true){
                if(value != ""){
                    value = value + ", ";
                }
                value = value + $('#'+id)[0][i].innerText;
            }
        }
    }
    return value;
}
— 비 렌드 라 카데
소스
그것을하는 힘든 방법이지만 모든 것이 효과가 있습니다.
— MC9000
2 

	function fundrp(){
	var text_value = $("#drpboxid option:selected").text();  
	console.log(text_value);
	var val_text = $("#drpboxid option:selected").val();  
	console.log(val_text);
	var value_text = $("#drpboxid option:selected").attr("vlaue") ;
	console.log(value_text);
	var get_att_value = $("#drpboxid option:selected").attr("id") 
	console.log(get_att_value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="drpboxid">
	<option id="1_one" vlaue="one">one</option>
	<option id="2_two" vlaue="two">two</option>
	<option id="3_three" vlaue="three">three</option>              
</select>
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>
스 니펫 확장

— 삭티 수단
소스
1

나는 이것이 오래되었다는 것을 알고 있지만 더 최신 답변으로 이것을 업데이트하지만 

$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
 alert(prepMin);
});

이게 도움이 되길 바란다

— mindmyweb
소스
1

이 코드 중 하나를 사용하십시오 

$('#dropDownId :selected').text();

또는

$('#dropDownId').text();
— 비핀
소스
1 
$("#selector <b>></b> option:selected").val()

또는

$("#selector <b>></b> option:selected").text()

위의 코드는 저에게 효과적이었습니다.

— Stefan Kelchtermans
소스
1

다음 코드를 사용하여이 작업을 수행 할 수 있습니다.

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

선택 목록의 옵션에서 선택한 값을 얻으려면. 이것은 트릭을 할 것입니다.

$('#dropDownId option:selected').text();
— 덜리스 데 코스타
소스
0

다음 중 하나를 사용할 수 있습니다.

$(document).on('change', 'select#dropDownId', function(){

            var value = $('select#dropDownId option:selected').text();

            //OR

            var value = $(this).val();

});
— 수레 쉬 버닥
소스
0

이 시도:

 $('#dropDownId option').filter(':selected').text();     

 $('#dropDownId option').filter(':selected').val();
— saravanajd
소스
0

페이지로드시 선택한 값을 얻으려면 아래 방법을 사용하십시오.

$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);`
            });
});
— UTHIRASAMY
소스
0

드롭 다운이 두 개 이상인 경우 다음을 시도하십시오.

HTML :

<select id="dropdown1" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>
<select id="dropdown2" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>

자바 스크립트 :

    function myFunction(sel) {
        var selected = sel.value;
    }
— RGriffiths
소스
0

HTML :

<select class="form-control" id="SecondSelect">
       <option>5<option>
       <option>10<option>
       <option>20<option>
       <option>30<option>
</select>

자바 스크립트 :

var value = $('#SecondSelect')[0].value;
— 마흐디 호세 니
소스
문제를 해결하는 방법과 이유에 대한 설명을 포함하여 게시물의 품질을 향상시키는 데 도움이되고 더 많은 투표를 할 수 있습니다.
— Android
-1 
$("#dropDownId").val('2');
var SelectedValue= $("#dropDownId option:selected").text();
$(".ParentClass .select-value").html(SelectedValue);


<p class="inline-large-label button-height ParentClass" >
     <label for="large-label-2" class="label">Country <span style="color: Red;">*</span><small></small></label>
     <asp:DropDownList runat="server" ID="dropDownId " CssClass="select" Width="200px">          
    </asp:DropDownList>
</p>
— 무 다시 르이라 하드
소스
-1

이것은 당신을 위해 작동합니다 

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });
— 무 하르 드 루 자익
소스
드롭 다운 옵션이 프로그래밍 방식으로 선택된 것으로 표시되면 (드롭 다운을 채우는 아약스 요청과 같이)? .val ()을 얻으려고하면 값에 대해 null을 얻습니다 (소스를 검사하면 옵션이 실제로 선택되었음을 표시하더라도)! $ ( "myDD option : selected"). val ()은 정의되지 않습니다.
— MC9000
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.