jQuery select2 รับค่าของ Select tag?

สวัสดีเพื่อนนี่คือรหัสของฉัน:

<select id='first'>
  <option value='1'> First  </option>
  <option value='2'> Second </option>
  <option value='3'> Three  </option>
</select>

นี่คือรหัส select2 ของฉัน:

$("#first").select2();

ด้านล่างนี้คือรหัสสำหรับรับค่าที่เลือก

$("#first").select2('val'); // It returns first,second,three.

นี่คือกลับข้อความเหมือนและฉันต้องการที่จะได้รับfirst,second,three หมายความว่าฉันต้องการค่าของกล่องเลือกไม่ใช่ข้อความ1,2,3

$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.

ในการรับเลือกองค์ประกอบคุณสามารถใช้ได้ $('#first').val();

เพื่อรับข้อความของค่าที่เลือก - $('#first :selected').text();

คุณช่วยโพสต์select2()รหัสฟังก์ชันของคุณได้ไหม

$("#first").select2('data') จะส่งคืนข้อมูลทั้งหมดเป็นแผนที่

หากคุณใช้ ajaxคุณอาจต้องการรับค่าที่อัปเดตของการเลือกทันทีหลังจากการเลือก

//Part 1

$(".element").select2(/*Your code*/)    

//Part 2 - continued 

$(".element").on("select2:select", function (e) { 
  var select_val = $(e.currentTarget).val();
  console.log(select_val)
});

เครดิต: Steven-Johnston

วิธีนี้ช่วยให้คุณลืมเลือกองค์ประกอบ มีประโยชน์เมื่อคุณไม่มี id ในองค์ประกอบที่เลือก

$("#first").select2()
.on("select2:select", function (e) {
    var selected_element = $(e.currentTarget);
    var select_val = selected_element.val();
});

คำตอบง่ายๆคือ:

$('#first').select2().val()

และคุณสามารถเขียนด้วยวิธีนี้:

 $('#first').val()

ลองสิ่งนี้:

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option

ดูซอนี้
โดยพื้นฐานแล้วคุณต้องการรับแท็กvalueของคุณoptionแต่คุณพยายามหาค่าของselect-node ของคุณด้วย$("#first").val().

ดังนั้นเราต้องเลือกแท็กตัวเลือกและเราจะใช้ตัวเลือก jQuerys:

$("#first option").each(function() {
    console.log($(this).val());
});

$("#first option")เลือกทุกซึ่งเป็นลูกขององค์ประกอบที่มีประชาชนได้optionfirst

โซลูชันข้างต้นใช้งานไม่ได้สำหรับฉันกับ select2 ล่าสุด (4.0.13)

ด้วย jQuery คุณสามารถใช้โซลูชันนี้เพื่อดึงค่าตามเอกสารประกอบ: https://select2.org/programmatic-control/retrieving-selections

$('#first').find(':selected').val();

คำตอบอื่น ๆ ไม่ได้ผลสำหรับฉันดังนั้นฉันจึงพัฒนาวิธีแก้ปัญหา:

ฉันสร้างตัวเลือกด้วย class = "option-item"เพื่อการกำหนดเป้าหมายที่ง่าย

HTML:

<select id="select-test">
<option value="5-val" id="first-id" class="option-item"> First option </option>
</select>

จากนั้นสำหรับทุกตัวเลือกที่เลือกฉันเพิ่มคุณสมบัติที่ไม่มีการแสดงผล

CSS:

option:checked {
   display: none;
}

ตอนนี้เราสามารถเพิ่มการเปลี่ยนแปลงใน SelectBox ของเราเพื่อค้นหาตัวเลือกที่เราเลือกด้วยคุณสมบัติ display none โดย simple : hidden attribute

jQuery:

$('#select-test').change(function(){
//value 
    $('#select-test').find('.option-item:hidden').val();
//id
    $('#select-test').find('.option-item:hidden').attr('id');
//text
    $('#select-test').find('.option-item:hidden').text();
});

การเล่นซอ: https://jsfiddle.net/Friiz/2dk4003j/10/

วิธีการแก้ :

var my_veriable = $('#your_select2_id').select2().val();
var my_last_veriable = my_veriable.toString();