วิธีรับค่ากล่องที่เลือกหลายค่าโดยใช้ jQuery


คำตอบ:



291

การใช้.val()ฟังก์ชั่นในรายการแบบเลือกได้หลายรายการจะส่งกลับอาร์เรย์ของค่าที่เลือก:

var selectedValues = $('#multipleSelect').val();

และใน html ของคุณ:

<select id="multipleSelect" multiple="multiple">
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

11
เกิดอะไรขึ้นถ้าคุณต้องการที่จะได้รับText 1ค่าแทน? แทนที่.val()ด้วย.text()?
Raza Ahmed

9
น่าสังเกตว่าตัวเลือกหลายตัวที่ไม่มีสิ่งใดถูกเลือกจะส่งคืนnullแทนที่จะเป็นอาร์เรย์ว่าง ซึ่งหมายความว่าหากคุณเพิ่มมูลค่าที่เลือกโดยทางโปรแกรมคุณมีการเล่นปาหี่เล็กน้อยเพื่อให้ถูกต้อง
Leo

ขอบคุณ! มีหลายวิธีในการรับค่าจากองค์ประกอบที่มี jQuery ซึ่งย่อมต้องดิ้นรนหาวิธีที่คุณกำลังมองหา
Charles Wood

5
@Leo คุณสามารถเพิ่ม coalesc เพื่อหลีกเลี่ยงปัญหา null เช่นvar selectedValues = $('#multipleSelect').val() || []; ยังควรสังเกตว่ามันส่งคืนอาร์เรย์ของสตริง .toString()ฉันถูกเมื่อเทียบกับจำนวนเต็มและได้รับการแข่งขันที่ไม่มีดังนั้นฉันเพิ่ม
tkerwood

16

คุณยังสามารถใช้ฟังก์ชั่นแผนที่ js:

$("#multipleSelect :selected").map(function(i, el) {
    return $(el).val();
}).get();

และจากนั้นคุณจะได้รับคุณสมบัติใด ๆ ของoptionองค์ประกอบ:

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

2
คำตอบที่ดี แต่ไม่จำเป็นต้องจ่ายค่าใช้จ่ายเพิ่มเติมในการห่อelเป็นวัตถุ jQuery สำหรับทุก ๆ ทางเลือก เพิ่งไปตรง DOM เมื่อมันไม่แปลกเกินไป คุณอาจจะเปลี่ยนไปเพียง$(el).val() el.valueแน่นอนถ้าคุณคุ้นเคยกับ jQuery หรือต้องการคว้าข้อมูลหรือคุณลักษณะเช่นตัวอย่างอื่น ๆ ของคุณ jQuery จะไม่ทำร้ายใคร
KyleMit

1
@ KyleMit สุดยอดเคล็ดลับ เพียงใช้วิธีนี้เพื่อรวบรวมค่าฟิลด์ที่ซ่อนอยู่และทำงานได้อย่างสมบูรณ์
EvilDr

12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

อีกหนึ่งอนุมัติปัญหานี้ อาร์เรย์ที่เลือกจะมีดัชนีเป็นค่าตัวเลือกและรายการอาร์เรย์แต่ละรายการจะมีข้อความเป็นค่าของมัน

ตัวอย่างเช่น

<select id="multipleSelect" multiple="multiple">
    <option value="abc">Text 1</option>
    <option value="def">Text 2</option>
    <option value="ghi">Text 3</option>
</select>

ถ้าเลือกตัวเลือกว่า 1 และ 2

อาร์เรย์ที่เลือกจะเป็น:

selected['abc']=1; 
selected['def']=2.

5

เพียงแค่หนึ่งบรรทัด -

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

ผลลัพธ์: ["text1", "text2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

เอาต์พุต: ["value1", "value2"]

ถ้าคุณใช้. join ()

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

เอาท์พุต: text1, text2, text3


4

รหัส Html:

 <select id="multiple" multiple="multiple" name="multiple">
  <option value=""> -- Select -- </option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
  <option value="4">Opt4</option>
  <option value="5">Opt5</option>
 </select>   

รหัส JQuery:

$('#multiple :selected').each(function(i, sel){ 
    alert( $(sel).val() ); 

});

หวังว่ามันจะใช้งานได้


14
อย่า "หวังว่ามันใช้งานได้" หากคุณไม่แน่ใจว่าเป็นคำตอบให้ทดสอบและแน่ใจ!
Sterling Archer

6
หากคุณไม่แน่ใจคำตอบอย่าโพสต์เลย .. !! เราไม่ได้อยู่ที่นี่เพื่อหวัง .. !! LOL
Clain Dsilva

3
เฮ้ชาย มันทำงานได้อย่างสมบูรณ์ ลองดูสิ คุณควรหวังมัน อย่าแสดงความคิดเห็นที่ไม่เกี่ยวข้อง ..
Prabhagaran

2
นี่คือการใช้งานที่ไม่มีประสิทธิภาพของ jQuery Better is approach คือนำหน้าด้วยตัวเลือก ID เช่นนี้: $('#multiple').find(':selected')@Prabhagaran
cannot_mutably_borrow

@YounisShah ฉันแทบจะบอกว่ามันเป็น "ไม่มีประสิทธิภาพ" เนื่องจากความแตกต่างของเวลาคือความสัมพันธ์ไม่มีอะไร ...
NorCalKnockOut

0

รับค่าที่เลือกในตัวคั่นจุลภาค

var Accessids = "";
$(".multi_select .btn-group>ul>li input:checked").each(function(i,obj)
{
    Accessids=Accessids+$(obj).val()+",";
});
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.