चुना प्लगइन के साथ एक चयन में परिवर्तन


105

मैं चुना प्लगइन के साथ चयन में वर्तमान में चयनित विकल्प को बदलने की कोशिश कर रहा हूं।

प्रलेखन कवर सूची को अद्यतन करने, और बाहर से वर्तमान में चयनित मान बदलने पर एक घटना है जब एक विकल्प चुना जाता है, लेकिन कुछ भी (है कि मैं देख सकते हैं) ट्रिगर।

मैंने कोड को प्रदर्शित करने के लिए एक jsField बनाया है और चयन बदलने के मेरे प्रयास के तरीके:

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

मैं आपके द्वारा प्रदान किए गए jsfiddle प्रदर्शन को नहीं चला सकता। क्या आप इसे अपडेट कर सकते हैं
लकी

ठीक है। आपके प्रदर्शन को नहीं चला पाने का कारण यह था कि चुना गया पुस्तकालय गलत यूआरएल की ओर इशारा कर रहा था। यहाँ अपडेट किया गया jsfiddle
लकी

जवाबों:


214

डॉक्स में "अपडेट किए गए गतिशील रूप से" खंड से : आपको फ़ील्ड पर 'चुनी हुई: अपडेट की गई' घटना को ट्रिगर करने की आवश्यकता है

$(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
हेनसनफरेल

मैं यहाँ ठोकर खाई क्योंकि मैं एक बहु चयनित चुनी हुई खोज परिणाम सूची (जब भी फ़ोकस खो गया था) से सर्वश्रेष्ठ वर्तमान में मेल खाने वाले विकल्प का चयन करने का एक तरीका खोजने की कोशिश कर रहा था। यहाँ मेरी खोज के बारे में एक छोटी सी पहेली है । आपको किसी भी ईवेंट को ट्रिगर करने की आवश्यकता नहीं है। शायद, यह किसी और के लिए भी उपयोग किया जाता है ... :)
तिमो

इसके बावजूद कि उपरोक्त कोड काम करता है, यह केवल एक बार होता है। मेरा मतलब है कि मैं फिर से मेनू पर क्लिक करता हूं, जहां चुना हुआ प्लगइन संलग्न है वह मान नहीं लेता है जो कि वैल के अंदर है ()। ऐसा क्यों हो सकता है
दिमित्रीस पापागेर्गिओउ

9
मुझे पता है कि यह एक पुरानी पोस्ट है - लेकिन अपडेट करने का एक सरल तरीका सिर्फ एक स्ट्रिंग में है: $('select').val(2).trigger("chosen:updated");
एंड्रयू न्यूबी

10
@Lucas Welper: आप भी बदलना चाहिए $('select').val(2);में $('select').val(2).change();, क्योंकि jQuery के साथ एक का चयन के चयनित विकल्प बदलते परिवर्तन घटना ट्रिगर नहीं करता और कुछ लोगों को यह आवश्यकता हो सकती है।
machineaddict

41

मेरा उत्तर देर से आया है, लेकिन मैं कुछ जानकारी जोड़ना चाहता हूं जो उपरोक्त सभी उत्तरों में छूट गई हैं।

1) यदि आप चुने हुए चयन में एकल मूल्य का चयन करना चाहते हैं।

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

2) यदि आप कई चुने हुए चयन का उपयोग कर रहे हैं, तो आपको एक ही समय में कई मान सेट करने की आवश्यकता हो सकती है।

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

निम्नलिखित लिंक से एकत्रित जानकारी:
1) चुना डॉक्स
2) चुना गितुब चर्चा


यह देखते हुए कि "22", "25" आदि मूल्य हैं। उदाहरण के लिए, आंतरिक HTML नहीं, उदाहरण के लिए <विकल्प मूल्य = "25"> कहीं-कहीं </ विकल्प>
Fadi Bakoura

2

कभी-कभी आपको चयनित विकल्पों में हेरफेर करने के लिए वर्तमान विकल्पों को हटाना होगा।

यहाँ एक उदाहरण है कि विकल्प कैसे सेट करें:

<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 (howto append विकल्प सहित): https://jsfiddle.net/59x3m6op/1/


1
उस मामले के लिए खाते में जहां चयन का अभी तक कोई मूल्य नहीं है, इसके बजाय अपडेट var selected = mySelect.val();करें var selected = mySelect.val() || [];
इलियटशैमलोट जूल

0

के मामले में कई चयन के प्रकार और / या आप सीधे एक ड्रॉपडाउन सूची आइटम के भीतर एक के बाद एक पहले से ही चयनित आइटम हटाने के लिए, चाहते हैं तो आपको कुछ का उपयोग कर सकते हैं:

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');
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.