jQuery รับตัวเลือกที่เลือกจากดรอปดาวน์

ฉันมักจะใช้$("#id").val()เพื่อส่งกลับค่าของตัวเลือกที่เลือก แต่คราวนี้มันไม่ทำงาน แท็กที่เลือกมี IDaioConceptName

รหัส 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
});

แก้ไข

ตามที่PossessWininกล่าวไว้คำตอบของฉันเพียงตอบคำถาม: วิธีการเลือก "ตัวเลือก" ที่เลือกไว้

option.val()ถัดไปจะได้รับค่าตัวเลือกในการใช้งาน

คุณคิดว่าใช้จาวาสคริปต์แบบธรรมดาธรรมดาหรือไม่?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

ดูเพิ่มเติมการรับข้อความ / ค่าตัวเลือกด้วย JavaScript

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

การอ่านค่า (ไม่ใช่ข้อความ) ของตัวเลือก:

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

จะปิดการเลือกได้อย่างไร? ในตัวแปรทั้งสองค่าสามารถเปลี่ยนแปลงได้โดยใช้:

A

ผู้ใช้ไม่สามารถโต้ตอบกับดรอปดาวน์ได้ และเขาไม่รู้ว่ามีตัวเลือกอื่นใดอีกบ้าง

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

B

ผู้ใช้สามารถเห็นตัวเลือกในเมนูดรอปดาวน์ แต่ตัวเลือกทั้งหมดถูกปิดใช้งาน:

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

ในกรณีนี้$("#Status").val() จะใช้งานได้กับรุ่น jQuery ที่เล็กกว่าเท่านั้น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 () จะใช้เป็นหลักในการรับค่าขององค์ประกอบรูปแบบเช่นการป้อนข้อมูลให้เลือกและ textarea ในกรณีขององค์ประกอบที่เลือกมันจะกลับมา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();

เพื่อดึงข้อมูล select ด้วย class = name เดียวกันที่คุณสามารถทำได้เพื่อตรวจสอบว่ามีการเลือกตัวเลือกที่เลือกไว้หรือไม่

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

ฉันมีปัญหาเดียวกันและฉันคิดว่าทำไมมันไม่ทำงานในกรณีของฉัน
หน้า html ถูกแบ่งออกเป็นชิ้นส่วน html ที่แตกต่างกันและฉันพบว่าฉันมีช่องป้อนข้อมูลอื่นที่มีรหัสเดียวกัน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()