jQuery รับข้อความแท็กตัวเลือกที่เฉพาะเจาะจง

เอาล่ะพูดว่าฉันมี:

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

ตัวเลือกจะเป็นอย่างไรถ้าฉันต้องการได้รับ "ตัวเลือก B" เมื่อฉันมีค่า '2'

โปรดทราบว่านี่ไม่ได้ถามถึงวิธีรับค่าข้อความที่เลือกแต่เพียงอย่างใดอย่างหนึ่งไม่ว่าจะเลือกหรือไม่ขึ้นอยู่กับแอตทริบิวต์ค่า ฉันเหนื่อย:

$("#list[value='2']").text();

แต่มันไม่ทำงาน

มันมองหาองค์ประกอบที่มีรหัสlistที่มีคุณสมบัติเท่ากับvalue สิ่งที่คุณต้องการคือลูกของ:2
optionlist

$("#list option[value='2']").text()

หากคุณต้องการได้ตัวเลือกที่มีค่าเป็น 2 ให้ใช้

$("#list option[value='2']").text();

หากคุณต้องการได้รับการเลือกตัวเลือกใดให้ใช้

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

สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบสำหรับฉันฉันกำลังมองหาวิธีที่จะส่งสองค่าที่แตกต่างพร้อมตัวเลือกที่สร้างโดย MySQL และต่อไปนี้เป็นแบบทั่วไปและแบบไดนามิก:

$(this).find("option:selected").text();

ดังที่ได้กล่าวไว้ในความคิดเห็นข้อใดข้อหนึ่ง ด้วยสิ่งนี้ฉันสามารถสร้างฟังก์ชั่นแบบไดนามิกที่ทำงานกับกล่องตัวเลือกทั้งหมดของฉันที่ฉันต้องการรับทั้งค่าตัวเลือกและข้อความ

ไม่กี่วันที่ผ่านมาฉันสังเกตเห็นว่าเมื่ออัปเดต jQuery จาก 1.6 เป็น 1.9 ของเว็บไซต์ที่ฉันใช้รหัสนี้หยุดทำงาน ... อาจเป็นความขัดแย้งกับรหัสอื่น ... อย่างไรก็ตามวิธีการแก้ปัญหาคือการลบตัวเลือกจาก ค้นหา () โทร:

$(this).find(":selected").text();

นั่นคือทางออกของฉัน ... ใช้เฉพาะเมื่อคุณมีปัญหาหลังจากอัปเดต jQuery ของคุณ

ตาม HTML ดั้งเดิมที่โพสต์โดย Paolo ฉันคิดขึ้นมาด้วยต่อไปนี้

$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

มันได้รับการทดสอบการทำงานบน Internet Explorer และ Firefox

$("#list option:selected").each(function() {
   alert($(this).text());
});  

สำหรับค่าที่เลือกหลายรายการใน#listองค์ประกอบ

1. หากมีเพียงหนึ่งแท็กที่เลือกในหน้านั้นคุณสามารถระบุตัวเลือกภายในของ id 'รายการ'

   jQuery("select option[value=2]").text();

2. เพื่อรับข้อความที่เลือก

   jQuery("select option:selected").text();

ลองทำสิ่งต่อไปนี้:

$("#list option[value=2]").text();

เหตุผลที่ว่าทำไมข้อมูลโค้ดเดิมของคุณไม่ได้ทำงานเป็นเพราะคุณOPTIONแท็กเป็นเด็กที่คุณแท็กซึ่งมีSELECTid list

นี่เป็นคำถามเก่าที่ยังไม่ได้รับการปรับปรุงในบางครั้งวิธีที่ถูกต้องในการทำตอนนี้คือการใช้

$("#action").on('change',function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

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

ฉันต้องการได้รับฉลากที่เลือก สิ่งนี้ใช้ได้กับฉันใน jQuery 1.5.1

$("#list :selected").text();

$(this).children(":selected").text()

$("#list [value='2']").text();

เว้นช่องว่างหลังจากตัวเลือกรหัส

คุณสามารถเลือกข้อความตัวเลือกโดยใช้ฟังก์ชั่น .text();

คุณสามารถเรียกใช้ฟังก์ชันดังนี้:

jQuery("select option:selected").text();

ในขณะที่ "วนซ้ำ" ผ่านองค์ประกอบเลือกที่สร้างขึ้นแบบไดนามิกด้วย. แต่ละ (ฟังก์ชั่น () () ... ): $("option:selected").text();และ$(this + " option:selected").text()ไม่ได้ส่งคืนข้อความตัวเลือกที่เลือก - แทนที่จะเป็นโมฆะ

แต่วิธีการแก้ปัญหาของ Peter Mortensen ทำงาน:

$(this).find("option:selected").text();

ฉันไม่ทราบสาเหตุที่วิธีปกติไม่ประสบความสำเร็จใน.each()(อาจเป็นความผิดพลาดของฉันเอง) แต่ขอขอบคุณปีเตอร์ ฉันรู้ว่าไม่ใช่คำถามเดิม แต่กำลังพูดถึง "สำหรับมือใหม่ที่มาจาก Google"

ฉันจะเริ่มต้นด้วย$('#list option:selected").each()ยกเว้นฉันจำเป็นต้องคว้าสิ่งของจากองค์ประกอบที่เลือกเช่นกัน

ใช้:

function selected_state(){
    jQuery("#list option").each(function(){
        if(jQuery(this).val() == "2"){
            jQuery(this).attr("selected","selected");
            return false;
        }
    });
}

jQuery(document).ready(function(){
    selected_state();
});

ฉันกำลังมองหารับ val โดยชื่อเขตภายในแทน ID และมาจาก google เพื่อโพสต์นี้ซึ่งช่วย แต่ไม่พบวิธีการแก้ปัญหาที่ฉันต้องการ แต่ฉันได้รับการแก้ปัญหาและนี่คือ:

ดังนั้นสิ่งนี้อาจช่วยให้ใครบางคนมองหาค่าที่เลือกด้วยชื่อเขตข้อมูลแทนที่จะใช้ long id สำหรับรายการ SharePoint:

var e = $('select[title="IntenalFieldName"] option:selected').text(); 

ฉันต้องการคำตอบนี้เมื่อฉันจัดการกับวัตถุที่ถูกโยนแบบไดนามิกและวิธีการอื่น ๆ ที่นี่ดูเหมือนจะไม่ทำงาน:

element.options[element.selectedIndex].text

หลักสูตรนี้ใช้วัตถุDOMแทนการแยกวิเคราะห์ HTML ด้วย nodeValue, childNodes เป็นต้น

เคล็ดลับ: คุณสามารถใช้รหัสด้านล่างหากค่าของคุณเป็นแบบไดนามิก:

$("#list option[value='"+aDynamicValue+"']").text();

หรือ (สไตล์ที่ดีกว่า)

$("#list option").filter(function() {
     return this.value === aDynamicValue;
}).text();

ดังกล่าวในjQuery รับข้อความแท็กตัวเลือกที่เฉพาะเจาะจงและการวางตัวแปรแบบไดนามิกกับค่า

ในฐานะที่เป็นโซลูชันทางเลือกคุณสามารถใช้ส่วนบริบทของตัวเลือก jQueryเพื่อค้นหา<option>องค์ประกอบด้วยvalue="2"ภายในรายการแบบเลื่อนลง:

$("option[value='2']", "#list").text();

ฉันต้องการรุ่นไดนามิกสำหรับการเลือกหลายรายการที่จะแสดงสิ่งที่เลือกไว้ทางขวา (หวังว่าฉันจะอ่านและเห็น$(this).find... ก่อนหน้านี้):

<script type="text/javascript">
    $(document).ready(function(){
        $("select[showChoices]").each(function(){
            $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
            doShowSelected($(this).attr('id'));//shows initial selections
        }).change(function(){
            doShowSelected($(this).attr('id'));//as user makes new selections
        });
    });
    function doShowSelected(inId){
        var aryVals=$("#"+inId).val();
        var selText="";
        for(var i=0; i<aryVals.length; i++){
            var o="#"+inId+" option[value='"+aryVals[i]+"']";
            selText+=$(o).text()+"<br>";
        }
        $("#spn"+inId).html(selText);
    }
</script>
<select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
    <option selected="selected" value=1>opt 1</option>
    <option selected="selected" value=2>opt 2</option>
    <option value=3>opt 3</option>
    <option value=4>opt 4</option>
</select>

คุณสามารถรับหนึ่งในวิธีต่อไปนี้

$("#list").find('option').filter('[value=2]').text()

$("#list").find('option[value=2]').text()

$("#list").children('option[value=2]').text()

$("#list option[value='2']").text()

$(function(){    
    
    console.log($("#list").find('option').filter('[value=2]').text());
    console.log($("#list").find('option[value=2]').text());
    console.log($("#list").children('option[value=2]').text());
    console.log($("#list option[value='2']").text());
    
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>