รับค่าที่เลือกของรายการแบบเลื่อนลงโดยใช้ 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();

— ant

2

Nope - $('#dropDownId').val();เป็นวิธีที่กระชับที่สุดในการรับค่าที่เลือก

— karim79

1

@shyam คุณไม่จำเป็นต้องเลือกในคำสั่งนี้เนื่องจาก ID นั้นไม่ซ้ำกันสำหรับเอกสารคุณควรใช้ชื่อแท็กเมื่ออ้างถึงคลาสselect#dropDownId option:selectedเท่านั้น

— ant

เป็นไปได้ที่ซ้ำกันของวิธีการรับดัชนีของ select-> แท็กตัวเลือก

— Chris Moschini

841

สำหรับองค์ประกอบ dom ที่เลือกเดี่ยวเพื่อรับค่าที่เลือกในปัจจุบัน:

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

ในการรับข้อความที่เลือกในปัจจุบัน:

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

— Peter McG
แหล่งที่มา

11

:selectedคุณจำเป็นต้องมีช่องว่างก่อน

— ระหว่าง

53

เร็วที่สุดวิธีการรับข้อความของตัวเลือกที่เลือกคือ:$("#dropDownId").children("option").filter(":selected").text()

— RickardN

3

ฉันขอให้คุณเชื่อมโยงการอ้างอิงถึง.val()และ.text()

— shareef

8

ริชาร์ดรหัสของคุณยาวเกินไป ... มันกระชับกว่าสำหรับการอ่าน

— PositiveGuy

2

@ JamesM.Lay อ้างอิง 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

"value" คือสิ่งที่ผู้ทำโค๊ดส่วนใหญ่พลาดในขณะที่การประกาศองค์ประกอบและการสืบค้นกลับมาที่ข้อความแทน

— ซาด

ตรวจสอบการสาธิตที่นี่freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— รหัส Spy

22

ลอง jQuery นี้

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

หรือจาวาสคริปต์นี้

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

หากคุณจำเป็นต้องเข้าถึงค่าและไม่ได้ข้อความแล้วลองใช้วิธีการแทนval()text()

ตรวจสอบลิงค์ซอด้านล่าง

Demo1 | Demo2

— Lucky
แหล่งที่มา

14

ลองนี้

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

— Kvadiyatar
แหล่งที่มา

OP กำลังขอค่าที่เลือก คำตอบนี้จะได้รับเนื้อหาข้อความแบบเลื่อนลง ไม่ผิดไม่ใช่แค่สิ่งที่เขาขอ

— Joshua Dance

12

ฉันรู้ว่านี่เป็นโพสต์เก่ามากชะมัดและฉันควรจะถูกเฆี่ยนสำหรับการฟื้นคืนชีพที่น่าสมเพชนี้ แต่ฉันคิดว่าฉันจะแบ่งปันตัวอย่าง JS เล็ก ๆ น้อย ๆ ที่เป็นประโยชน์มากที่ฉันใช้ตลอดทุกแอปพลิเคชันในคลังแสงของฉัน ...

หากพิมพ์ออกมา:

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

อายุมากขึ้นลองเพิ่ม crumpets เล็ก ๆ เหล่านี้ลงใน*.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>

— Uthaiah
แหล่งที่มา

8

นี้จะทำเคล็ดลับ

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

— ซิงเกิล
แหล่งที่มา

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>

— เจสลิค
แหล่งที่มา

4

ลองสิ่งนี้มันจะได้รับค่า:

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

— Ângelo Rigo
แหล่งที่มา

3

คุณระบุองค์ประกอบที่เลือกของคุณด้วยรหัสหรือไม่?

<select id='dropDownId'> ...

ข้อความสั่งแรกของคุณควรใช้งานได้!

— schaechtele
แหล่งที่มา

3

สำหรับการใช้ข้อความที่เลือก:

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

สำหรับค่าที่เลือกใช้:

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

— Mahi
แหล่งที่มา

2

สิ่งidที่สร้างขึ้นสำหรับการควบคุมแบบหล่นลงของคุณในhtmlจะเป็นแบบไดนามิก ดังนั้นใช้รหัสที่สมบูรณ์$('ct100_<Your control id>').val().มันจะทำงาน

— VenkeHV
แหล่งที่มา

2

หรือถ้าคุณจะลอง:

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

ฉันใช้มันวันนี้และมันใช้งานได้ดี

— ของแข็ง
แหล่งที่มา

2

ใช้

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

สิ่งนี้ควรใช้งานได้ :)

— Namila
แหล่งที่มา

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

— Virendra khade
แหล่งที่มา

วิธีที่ยากลำบากในการทำมัน แต่สิ่งที่ทำงาน

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

ขยายตัวอย่างข้อมูล

— Sakthi Sudhan
แหล่งที่มา

1

ฉันรู้ว่ามันเก่า แต่ฉันก็อัพเดตมันด้วยคำตอบที่ทันสมัย

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

ฉันหวังว่านี่จะช่วยได้

— mindmyweb
แหล่งที่มา

1

$("select[id$=dropDownId]").val()

ลองนี้

— Rakesh
แหล่งที่มา

1

ใช้รหัสใดรหัสหนึ่ง

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

หรือ

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

— Bipin
แหล่งที่มา

1

นี่คือสิ่งที่ได้ผล

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

— Shittu Joseph Olugbenga
แหล่งที่มา

1

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

หรือ

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

รหัสข้างต้นทำงานได้ดีสำหรับฉัน

— Stefan Kelchtermans
แหล่งที่มา

1

คุณสามารถทำได้โดยใช้รหัสต่อไปนี้

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

หากคุณต้องการได้รับค่าที่เลือกจากตัวเลือกรายการของเลือก นี้จะทำเคล็ดลับ

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

— Dulith De Costa
แหล่งที่มา

0

คุณสามารถใช้สิ่งเหล่านี้:

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

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

            //OR

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

});

— Suresh Burdak
แหล่งที่มา

0

คุณต้องใส่แบบนี้

$('[id$=dropDownId] option:selected').val();

— Arthur Salgado
แหล่งที่มา

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>

JavaScript:

    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>

JavaScript:

var value = $('#SecondSelect')[0].value;

— mahdi hosseini
แหล่งที่มา

โปรดระบุคำอธิบายถึงวิธีการและสาเหตุที่การแก้ปัญหาจะช่วยปรับปรุงคุณภาพการโพสต์ของคุณได้อย่างไรและอาจส่งผลให้คะแนนโหวตมากขึ้น

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

— Muddassir Irahad
แหล่งที่มา

-1

สิ่งนี้น่าจะเหมาะกับคุณ

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });

— mohamed ruzaik
แหล่งที่มา

จะทำอย่างไรถ้าตัวเลือกแบบเลื่อนลงของคุณถูกทำเครื่องหมายเป็นเลือกโดยทางโปรแกรม (เช่นจากคำขอ ajax ที่เติมแบบเลื่อนลง)? หากคุณพยายามรับ. val () คุณจะได้รับค่าว่าง (แม้ว่าการตรวจสอบแหล่งที่มาจะแสดงให้คุณเห็นว่าตัวเลือกนั้นถูกเลือกจริง ๆ !) $ ("ตัวเลือก myDD: เลือก"). val () จะให้ผลไม่ได้กำหนด

— MC9000