การเปลี่ยนการเลือกในส่วนที่เลือกด้วยปลั๊กอิน Chosen


106

ฉันกำลังพยายามเปลี่ยนตัวเลือกที่เลือกในปัจจุบันในการเลือกด้วยปลั๊กอิน Chosen

เอกสารครอบคลุมการปรับปรุงรายการและเรียกเหตุการณ์เมื่อตัวเลือกที่ถูกเลือก แต่ไม่มีอะไร (ที่ฉันสามารถดู) บนภายนอกเปลี่ยนค่าที่เลือกในปัจจุบัน

ฉันได้สร้างjsFiddle เพื่อสาธิตโค้ดและวิธีที่ฉันพยายามเปลี่ยนการเลือก:

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});

ฉันไม่สามารถเรียกใช้การสาธิต jsfiddle ที่คุณให้มา คุณช่วยอัปเดตได้ไหม
โชคดี

ตกลง. สาเหตุที่ฉันไม่สามารถเรียกใช้การสาธิตของคุณได้เนื่องจากไลบรารีที่เลือกชี้ไปที่ URL ที่ไม่ถูกต้อง นี่คือjsfiddle ที่
Lucky

คำตอบ:


215

จากส่วน "การอัปเดตที่เลือกแบบไดนามิก" ในเอกสาร : คุณต้องทริกเกอร์เหตุการณ์ "เลือก: อัปเดต" ในฟิลด์

$(document).ready(function() {

    $('select').chosen();

    $('button').click(function() {
        $('select').val(2);
        $('select').trigger("chosen:updated");
    });

});

หมายเหตุ: เวอร์ชันก่อนหน้า 1.0 ใช้สิ่งต่อไปนี้:

$('select').trigger("liszt:updated");

6
FYI: อัปเดตเป็น 1.0 ซึ่งตอนนี้ใช้chosen:updatedแทนliszt:updated
Henesnarfel

ฉันสะดุดที่นี่ขณะที่ฉันพยายามหาวิธีเลือกตัวเลือกที่ดีที่สุดในปัจจุบันที่ตรงกันจากรายการผลการค้นหาที่เลือกหลายรายการ (เมื่อใดก็ตามที่โฟกัสหายไป) นี่คือซอสั้น ๆเกี่ยวกับการสำรวจของฉัน คุณไม่จำเป็นต้องทริกเกอร์เหตุการณ์ใด ๆ บางทีอาจเป็นประโยชน์สำหรับคนอื่นด้วย ... :)
Timo

แม้ว่าโค้ดด้านบนจะใช้งานได้ แต่สิ่งนี้จะเกิดขึ้นเพียงครั้งเดียวฉันหมายความว่าถ้าฉันคลิกอีกครั้งเมนูที่แนบปลั๊กอินที่เลือกจะไม่ใช้ค่าที่อยู่ใน val () ทำไมสิ่งนี้จึงอาจเกิดขึ้น
Dimitris Papageorgiou

9
ฉันรู้ว่านี่เป็นโพสต์เก่า - แต่วิธีที่ง่ายกว่าในการอัปเดตนั้นอยู่ในสตริงเดียว: $('select').val(2).trigger("chosen:updated");
Andrew Newby

10
@Lucas Welper: คุณควรเปลี่ยน$('select').val(2);เป็น$('select').val(2).change();เพราะการเปลี่ยนตัวเลือกที่เลือกด้วย jQuery ไม่ทำให้เกิดเหตุการณ์เปลี่ยนแปลงและบางคนอาจต้องการ
machineaddict

42

คำตอบของฉันช้า แต่ฉันต้องการเพิ่มข้อมูลที่พลาดในคำตอบข้างต้นทั้งหมด

1) หากคุณต้องการเลือกค่าเดียวในเลือกที่เลือก

$('#select-id').val("22").trigger('chosen:updated');

2) หากคุณใช้การเลือกหลายรายการคุณอาจต้องตั้งค่าหลายค่าพร้อมกัน

$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');

ข้อมูลที่รวบรวมจากลิงค์ต่อไปนี้:
1) เลือกเอกสาร
2) เลือกการสนทนา Github


โดยสังเกตว่า "22" "25" เป็นต้นเป็นค่าไม่ใช่ HTML ภายในตัวอย่างเช่น <option value = "25"> บางครั้ง </option>
Fadi Bakoura

3

บางครั้งคุณต้องลบตัวเลือกปัจจุบันออกเพื่อจัดการกับตัวเลือกที่เลือก

นี่คือตัวอย่างวิธีการตั้งค่าตัวเลือก:

<select id="mySelectId" class="chosen-select" multiple="multiple">
  <option value=""></option>
  <option value="Argentina">Argentina</option>
  <option value="Germany">Germany</option>
  <option value="Greece">Greece</option>
  <option value="Japan">Japan</option>
  <option value="Thailand">Thailand</option>
</select>

<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);

function activateChosen($container, param) {
    param = param || {};
    $container.find('.chosen-select:visible').chosen(param);
    $container.find('.chosen-select').trigger("chosen:updated");
}

function selectChosenOptions($select, values) {
    $select.val(null);                                  //delete current options
    $select.val(values);                                //add new options
    $select.trigger('chosen:updated');
}
</script>

JSFiddle (รวมถึงวิธีการต่อท้ายตัวเลือก): https://jsfiddle.net/59x3m6op/1/


1
หากต้องการพิจารณากรณีที่การเลือกยังไม่มีค่าให้อัปเดตvar selected = mySelect.val();เป็นvar selected = mySelect.val() || [];แทน
ElliotSchmelliot

1

ในกรณีที่มีการเลือกหลายประเภทและ / หรือหากคุณต้องการลบรายการที่เลือกไว้แล้วทีละรายการโดยตรงภายในรายการแบบเลื่อนลงคุณสามารถใช้สิ่งต่อไปนี้:

jQuery("body").on("click", ".result-selected", function() {
    var locID = jQuery(this).attr('class').split('__').pop();
    // I have a class name: class="result-selected locvalue__209"
    var arrayCurrent = jQuery('#searchlocation').val();
    var index = arrayCurrent.indexOf(locID);
    if (index > -1) {
        arrayCurrent.splice(index, 1);
    }
    jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.