รับตัวเลือกที่เลือกจากองค์ประกอบที่เลือก


93

ฉันพยายามรับตัวเลือกที่เลือกจากเมนูแบบเลื่อนลงและเติมข้อมูลรายการอื่นด้วยข้อความดังต่อไปนี้ IE กำลังเห่าพายุและไม่ทำงานใน Firefox:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

ผมทำอะไรผิดหรือเปล่า?

คำตอบ:


187

นี่คือเวอร์ชันสั้น:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79จับได้ดีการตัดสินด้วยชื่อองค์ประกอบของคุณtxtEntry2อาจเป็นช่องข้อความหากเป็นอินพุตประเภทใดก็ได้คุณจะต้องใช้.val()แทนหรือ.text()ดังนี้:

  $('#txtEntry2').val($(this).find(":selected").text());

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


7
หากtxtEntry2เป็นการป้อนข้อความ OP จะต้องใช้val()แทน
karim79

@ karim79 - จุดที่ดีตามชื่อองค์ประกอบน่าจะเป็นการอัปเดต
Nick Craver

ใช่โดยการเปลี่ยน. text เป็น .val และดึงข้อความต่างกันทุกอย่างจะถูกแพนออก ขอบคุณเพื่อน
Matt


8

นี่คือเวอร์ชันที่สั้นกว่าที่ควรใช้:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

Uncaught TypeError: Object # <HTMLSelectElement> ไม่มีเมธอด 'val'
DoodleKana

1
this.valueจะแก้ไขได้
Kris Selbekk

4

ด้วย jQuery น้อย:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value เป็น JavaScript ธรรมดา

(ที่มา: German SelfHTML )



2

หากต้องการทราบจำนวนองค์ประกอบที่เลือกใช้

$("select option:selected").length

หากต้องการรับมูลค่าขององค์ประกอบที่เลือกทั้งหมดให้ใช้

    var str = "";
  $("select option:selected").each(function () {
        str += $(this).text() + " ";
      });


1

ส่วนแรกคือการรับองค์ประกอบจากเมนูแบบเลื่อนลงซึ่งอาจมีลักษณะดังนี้:

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

ในการจับภาพผ่าน jQuery คุณสามารถทำได้ดังนี้:

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

เมื่อคุณเก็บค่าในตัวแปรของคุณแล้วขั้นตอนต่อไปคือการส่งข้อมูลที่เก็บไว้ในตัวแปรไปยังฟิลด์ฟอร์มหรือองค์ประกอบ HTML ที่คุณเลือก อาจเป็น div p หรือองค์ประกอบที่กำหนดเอง

กล่าวคือ <p></p> OR <div></div>

คุณจะใช้:

$ ('p'). html (การวนซ้ำ); หรือ $ ('div'). html (การวนซ้ำ);

หากคุณต้องการเติมข้อมูลในช่องข้อความเช่น:

<input type="text" name="textform" id="textform"></input>

คุณจะใช้:

$ ('# textform'). text = การวนซ้ำ;

แน่นอนว่าคุณสามารถทำทุกอย่างข้างต้นได้ในขั้นตอนไม่มากฉันแค่เชื่อว่ามันช่วยให้ผู้คนเรียนรู้เมื่อคุณแบ่งมันออกเป็นขั้นตอนที่เข้าใจง่าย ... หวังว่านี่จะช่วยได้!


1

การใช้คุณสมบัติ selectedOptions (HTML5) คุณจะได้รับตัวเลือกที่เลือก

document.getElementbyId("id").selectedOptions; 

ด้วย JQuery สามารถทำได้โดยการทำเช่นนี้

$("#id")[0].selectedOptions; 

หรือ

$("#id").prop("selectedOptions");

คุณสมบัติมีอาร์เรย์ HTMLCollection ที่คล้ายคลึงกับตัวเลือกที่เลือกนี้

[<option value="1">​ABC</option>]

หรือหลายตัวเลือก

[<option value="1">​ABC</option>, <option value="2">​DEF</option> ...]

0

ข้างต้นจะใช้งานได้ดี แต่ดูเหมือนว่าคุณจะพลาด jQuery typecast สำหรับข้อความแบบเลื่อนลง นอกเหนือจากนั้นขอแนะนำให้ใช้.val()เพื่อตั้งค่าข้อความสำหรับองค์ประกอบประเภทข้อความอินพุต ด้วยการเปลี่ยนแปลงเหล่านี้รหัสจะมีลักษณะดังต่อไปนี้:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

0

หากคุณมีสิ่งนี้อยู่แล้วและใช้ jquery นี่จะเป็นคำตอบของคุณ:

$ ($ (this) [0] .selectedOptions [0]). text ()


0

ให้ HTML นี้:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

เลือกตามคำอธิบายสำหรับ jQuery v1.6 +:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.