चयनित चयन jquery का मान 2 कैसे सेट करें?

Question

यह सेलेक्ट्स से पहले कोड 2 वर्जन 4 से होता है

मेरे पास एक सरल कोड है select2जो कि अजाक्स से डेटा प्राप्त करता है

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});

यह कोड काम कर रहा है, हालांकि, मुझे इस पर मान सेट करने की आवश्यकता है जैसे कि संपादन मोड में। जब उपयोगकर्ता पहली बार किसी मूल्य का चयन करता है, तो उसे सहेज लिया जाएगा और जब उसे उस मूल्य को संपादित करने की आवश्यकता होगी, तो उसे select2पहले चुने गए मूल्य का चयन करने के लिए उसी चयन मेनू ( ) में दिखाई देना चाहिए, लेकिन मुझे कोई रास्ता नहीं मिल रहा है।

अपडेट करें:

HTML कोड:

<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">

Select2 प्रोग्रामेटिक एक्सेस इसके साथ काम नहीं करता है।

Comments

आपको HTML में केवल चयनित मान सेट करने या उपयोग करने में सक्षम होना चाहिए$("#programid").val()

— धमाका गोलियां

@ExplosionPills नेगेटिव, मैंने कोशिश की कि मुझे भी एक खाली मूल्य मिले। मुझे programid.val () का उपयोग कैसे करना चाहिए? मुझे सर्वर से मान मिला, फिर मुझे इसे select2 के इस छिपे हुए क्षेत्र में सेट करने की आवश्यकता है।

— ClearBoth

@ClearBoth मुझे यकीन नहीं है कि मुझे क्या मतलब है। क्या आप AJAX प्राप्त परिणामों में से एक को Select2 घटक के "चयनित" मान को सेट करने का प्रयास कर रहे हैं?

— एक फान

@AnPhan हां, क्या ऐसा करने का कोई तरीका है?

— ClearBoth

@ClearBoth है। नीचे मेरे जवाब की जाँच करें।

— एक फान

Answer 1

Select2 घटक के "चयनित" मान को गतिशील रूप से सेट करने के लिए:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

जहाँ दूसरा पैरामीटर अपेक्षित मान वाला ऑब्जेक्ट है।

अपडेट करें:

इस काम के लिए, बस टिप्पणी करना चाहता था कि नए Select2 में, करता है "a_key" है "पाठ" एक मानक Select2 वस्तु में। इसलिए:{id: 100, text: 'Lorem Ipsum'}

उदाहरण:

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});

@NoobishPro को धन्यवाद

Comments

मैं केवल select2 ('वैल', '1') आईडी के साथ कोशिश कर रहा था, लेकिन यह काम नहीं कर रहा था .. धन्यवाद

— ClearBoth

यह काम करता है, बस यह नोट करना चाहता था कि नए select2 में, "a_key" एक मानक select2 ऑब्जेक्ट में "टेक्स्ट" है। so: {id: 100, text: 'Lorem Ipsum'}

— NoobishPro

वही यहाँ v4 पर। इस पर मेरे बाल खींच रहा है। मुझे नहीं लगता कि जावास्क्रिप्ट समाधान के बिना यह संभव है। अब एक और jQuery / बूटस्ट्रैप Select2 ड्रॉपडाउन की तलाश में है (हर कल्पनीय विधि को

— अंजाम देने के

Select2 v4: $('#inputID').val(100).trigger('change') देखें select2.github.io/...

— पॉल

@NoobishPro और एक फ़ान - के लिए उत्तर और टिप्पणी के लिए धन्यवाद

— SINTO

Answer 2

SELECT2 <V4

---

चरण # 1: HTML

<input name="mySelect2" type="hidden" id="mySelect2">

चरण # 2: Select2 का एक उदाहरण बनाएँ

$("#mySelect2").select2({
      placeholder: "My Select 2",
      multiple: false,
      minimumInputLength: 1,
      ajax: {
          url: "/elements/all",
          dataType: 'json',
          quietMillis: 250,
          data: function(term, page) {
              return {
                  q: term,
              };
          },
          results: function(data, page) {
              return {results: data};
          },
          cache: true
      },
      formatResult: function(element){
          return element.text + ' (' + element.id + ')';
      },
      formatSelection: function(element){
          return element.text + ' (' + element.id + ')';
      },
      escapeMarkup: function(m) {
          return m;
      }
});

चरण # 3: अपना वांछित मान सेट करें

$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});

---

यदि आप AJAX के बिना select2 का उपयोग करते हैं, तो आप निम्न कार्य कर सकते हैं:

<select name="mySelect2" id="mySelect2">
  <option value="0">One</option>
  <option value="1">Two</option>
  <option value="2">Three</option>
</select>

/* "One" will be the selected option */
$('[name=mySelect2]').val("0");

आप भी ऐसा कर सकते हैं:

$("#mySelect2").select2("val", "0");

---

SELECT2 V4

---

के लिए Select2 v4 आप सीधे एक विकल्प जोड़ सकते हैं / इस प्रकार है:

<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
    <option value="TheID" selected="selected">The text</option>                                                                   
</select>

या JQuery के साथ:

var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
 
$("#myMultipleSelect2").append($newOption).trigger('change');

अन्य उदाहरण

$("#myMultipleSelect2").val(5).trigger('change');

Comments

ट्रिगर ( 'परिवर्तन');

— mihkov

$ ("# mySelect2")। select2 ("val", "0") - यह मान परिवर्तन के jquery ईवेंट को ट्रिगर करेगा। इसे कैसे रोका जाए। आमतौर पर जब उपयोगकर्ता फॉर्म जमा करते हैं, तो किए जाने के बाद, मैं सभी फॉर्म डेटा को रीसेट करता हूं। रीसेट चयन 2 को रीसेट नहीं करेगा। Select2 ("val", "0") का उपयोग करके उन परिवर्तनों को ट्रिगर किया जाएगा जो उपयोगकर्ता से कोई क्रिया नहीं के रूप में पागल है।

— छलांग rbk

संस्करण 4 select2.org/programmatic-control/add-select-clear-items

— रयान

.Trigger ('परिवर्तन') के लिए

— प्रतिबद्ध

Answer 3

एचटीएमएल:

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>

जावास्क्रिप्ट:

$("#lang").select2().select2('val','asp');

jsfiddle

Comments

वैल के बजाए टेक्स्ट द्वारा कैसे सेट करें

— रिजवान पटेल

सवाल यह था कि AJAX कॉल के साथ लोड करने के बाद यह कैसे करना है। इस मामले में यह जवाब काम नहीं करता है।

— MC9000

यदि आप इस ईवेंट को संसाधित करने के लिए अजीब हैं, तो यह चयन 2 मान परिवर्तनों को ट्रिगर करेगा, और यह उपयोगकर्ता के बिना इसे ट्रिगर करता है

— जम्पर आरबीके

Answer 4

जैसा कि मैंने कोशिश की थी, जब select2 में ajax का उपयोग करते हैं, तो select2 में नए मान सेट करने के लिए प्रोग्रामेटिक कंट्रोल के तरीके मेरे लिए काम नहीं करते हैं! अब मैं समस्या के समाधान के लिए ये कोड लिखता हूं:

$('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
        .val("20") //set value for option to post it
        .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2

आप यहां दिए गए लिंक में पूर्ण नमूना कोड का परीक्षण कर सकते हैं: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
इस नमूना कोड में एक अजाक्स चयन 2 है और आप एक बटन के साथ नया मान सेट कर सकते हैं।

$("#btn").click(function() {
  $('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
      .val("20") //set value for option to post it
      .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2
});

$("#sel").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function(params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function(data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">

<select id="sel" multiple="multiple" class="col-xs-5">
</select>

<button id="btn">Set Default</button>

Comments

मैं अलग-अलग डिस्प्लेके और सामान का उपयोग कर रहा हूं (हालांकि यह बुरा विचार था) - यह मेरी स्वीकृति परीक्षणों के लिए पूरी तरह से कोडेप्शन के साथ मदद करता है

— मंकीऑनकी

थकाऊ, निश्चित रूप से, लेकिन, जैसे कि सभी को यह पता चल रहा है कि Select2 v4 में बस कुछ करने का कोई तरीका नहीं है, एक डिफ़ॉल्ट चयन को सेट करने के रूप में बहुत ही सरल है

— MC9000

मुझे यह उत्तर चयन 2 v4 बनाने का एकमात्र तरीका मिला - ajax select।

Answer 5

var $option = $("<option selected></option>").val('1').text("Pick me");

$('#select_id').append($option).trigger('change');

इस परिशिष्ट को आजमाएँ और फिर चुनें। AJAX कॉल पर विकल्प की नकल नहीं करता है।

Comments

var $ विकल्प = $ ("<विकल्प चयनित> </ विकल्प>")। Val ('1')। पाठ ("मुझे चुनें"); $ ( '# select_id') संलग्न ($ विकल्प) .trigger ( 'परिवर्तन')।

— जिग्ज

धन्यवाद। संस्करण 4.0.0 (अजाक्स कॉल) पर पुष्टि की गई रचनाएं

— खलील

संस्करण 4 पर अजाक्स के साथ एक और पुष्टि की गई सफलता।

— एक कोडर

यदि आप अजाक्स के साथ खोज योग्य बॉक्स का उपयोग कर रहे हैं, तो यह सही समाधान है। इसने मेरे लिए जून 2019 तक काम किया।

— एरिक स्किफ

Answer 6

मैंने ऐसा किया-

$("#drpServices").select2().val("0").trigger("change");

Comments

कृपया उपयोगकर्ताओं को यह समझने में मदद करने के लिए कि आपका कोड कैसे काम करता है और ओपी के प्रश्न का उत्तर देने के लिए कुछ स्पष्टीकरण प्रदान करें।

— इवान

@ इवान, मैं इस $ ("# ड्रापसर्विस") की तरह कर रहा था । वैल ("0"); जो select2 ड्रॉपडाउन में कर का चयन नहीं करेगा, मूल्य और पाठ दोनों को प्रभावित करने के लिए हमें select2 के ट्रिगर परिवर्तन फ़ंक्शन की आवश्यकता होगी। यह मेरे लिए पूरी तरह से काम कर रहा है। मुझे उम्मीद है कि उपयोगकर्ता समझेंगे।

— आशी

Answer 7

वर्तमान संस्करण में select2- v4.0.1 आप इस तरह मूल्य निर्धारित कर सकते हैं:

var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });

// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

using "trigger(change)"
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

using destroy: 
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

<button class="js-programmatic-set-val">set value</button>

Comments

मैं परिवर्तन ईवेंट को ट्रिगर किए बिना मान कैसे सेट कर सकता हूं? परिवर्तन ईवेंट मेरे स्वयं के ईवेंट हैंडलर्स को ट्रिगर करता है जो तब होते हैं जब उपयोगकर्ता मैन्युअल रूप से मान बदलता है।

— enumag 14:

दूसरा विकल्प destroyप्लगइन को फिर से कॉल और री-कॉल करना है .. अपडेटेड कोड देखें ..

— Mosh Feu

क्या मेरे पास मूल रूप से select2 में पास किए गए विकल्पों को प्राप्त करने का एक तरीका है ताकि मैं उन्हें डुप्लिकेट न करूं? वैसे भी यह समाधान हैक की तरह लगता है।

— enumag

ज़रूर यह हच है। डॉक्स के अनुसार आधिकारिक तरीका परिवर्तन घटना को ट्रिगर करना है। so that I wouldn't have to duplicate themउन्हें डुप्लिकेट क्यों करना है? जब आप ऐसा करते हैं destroyतब selectभी उसका सब कुछ होता है options।

— मोश फ़ू

मेरा मतलब था कि विकल्प 2 का चयन किया गया:$example.select2({ ... this ... })

— enumag

Answer 8

अजाक्स के लिए, का उपयोग करें $(".select2").val("").trigger("change")। इससे समस्या का समाधान होना चाहिए।

Answer 9

मुझे लगता है कि आपको initSelectionफ़ंक्शन की आवश्यकता है

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  initSelection: function (element, callback) {
    var id = $(element).val();
    if (id !== "") {
      $.ajax("ajax.php/get_where", {
        data: {programid: id},
        dataType: "json"
      }).done(function (data) {
        $.each(data, function (i, value) {
          callback({"text": value.text, "id": value.id});
        });
        ;
      });
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});

Comments

यह काम कर रहा है। लेकिन संस्करण 4.0 के रूप में पदावनत किया गया है

— विजुअल बीन

Answer 10

एचटीएमएल

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>

जे एस

 $("#lang").select2().val('php').trigger('change.select2');

स्रोत: https://select2.github.io/options.html

Answer 11

में Select2 v.4

उपयोग $('selector').select2().val(value_to_select).trigger('change');

मुझे लगता है कि यह काम करना चाहिए

Answer 12

मान सेट करें और परिवर्तन घटना को तुरंत ट्रिगर करें।

$('#selectteam').val([183,182]).trigger('change');

Comments

शुक्रिया मेरा वही दिन

— जयदीप पुरोहित

Answer 13

    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

मैंने अपनी समस्या को इस सरल कोड से हल किया। जहाँ #select_location_id चुनिंदा बॉक्स की एक आईडी है और मूल्य select2 बॉक्स में सूचीबद्ध विकल्प का मूल्य है।

Answer 14

एक फान के जवाब ने मेरे लिए काम किया:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

लेकिन बदलाव को जोड़कर घटना को ट्रिगर किया गया

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();

Comments

इस तरह से करते समय मुझे त्रुटि "अनकैप्ड टाइपर्रर: $ (...)। चयन 2 (...)। परिवर्तन एक कार्य नहीं है (...)"। मुझे नहीं लगता कि Select2 के संस्करण 4.x के साथ यह संभव है - यहाँ कुछ भी अजाक्स के साथ काम नहीं करता है।

— MC9000

Answer 15

आप इस कोड का उपयोग कर सकते हैं:

$("#programid").val(["number:2", "number:3"]).trigger("change");

जहां 2 "संख्या: 2" और 3 में "संख्या: 3" वस्तु क्षेत्र में आईडी फ़ील्ड हैं

Answer 16

कभी-कभी, select2()सबसे पहले लोड हो रहा होगा, और यह नियंत्रण को पहले से चयनित मूल्य को सही ढंग से नहीं दिखाने के लिए बनाता है। कुछ सेकंड के लिए देरी लगाने से यह समस्या दूर हो सकती है।

setTimeout(function(){                  
    $('#costcentreid').select2();               
},3000);

Answer 17

$('#inputID').val("100").select2();

select2वर्तमान चयन में से किसी एक को चुनने के बाद आवेदन करना अधिक उपयुक्त होगा ।

Answer 18

मैंने कुछ ऐसा किया है कि select2 ajax ड्रॉपडाउन में तत्वों को निर्धारित किया जाए

      //preset element values
        $(id).val(topics);
       //topics is an array of format [{"id":"","text":""}, .....]
          setTimeout(function(){
           ajaxTopicDropdown(id,
                2,location.origin+"/api for gettings topics/",
                "Pick a topic", true, 5);                      
            },1);
        // ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url

Answer 19

आपको उपयोग करना चाहिए:

var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('<option value="Id">Text</option>').val("Id").trigger('change');

// For set multi selected values
var data =  [];//Array Ids
var option =  [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
    // append the new option
    $("#EventId").append('<option value="' + response.id + '">' + response.text + '</option>');

    // get a list of selected values if any - or create an empty array
    var selectedValues = $("#EventId").val();
    if (selectedValues == null) {
        selectedValues = new Array();
    }
    selectedValues.push(response.id);   // add the newly created option to the list of selected items
    $("#EventId").val(selectedValues).trigger('change');   // have select2 do it's thing
});

Answer 20

यदि आप एक इनपुट बॉक्स का उपयोग कर रहे हैं, तो आपको "बहु" संपत्ति को उसके मूल्य के साथ "सत्य" के रूप में सेट करना होगा। उदाहरण के लिए,

<script>
    $(document).ready(function () {

        var arr = [{ id: 100, text: 'Lorem Ipsum 1' },
            { id: 200, text: 'Lorem Ipsum 2'}];

        $('#inputID').select2({
            data: arr,
            width: 200,
            multiple: true
        });
    });
</script>

Answer 21

इसमें रिमोट डेटा लोडिंग select2 < version4का विकल्प होता है initSelection(), जिसके माध्यम से इनपुट के लिए प्रारंभिक मूल्य को एडिट मोड में सेट करना संभव है।

$("#e6").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 1,
    ajax: { 
        // instead of writing the function to execute the request we use Select2's convenient helper
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) {
            return {
                q: term, // search term
            };
        },
        results: function (data, page) {
            // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter the remote JSON data
            return { results: data.items };
        },
        cache: true
    },
    initSelection: function(element, callback) {
        // the input tag has a value attribute preloaded that points to a preselected repository's id
        // this function resolves that id attribute to an object that select2 can render
        // using its formatResult renderer - that way the repository name is shown preselected
        var id = $(element).val();
        if (id !== "") {
            $.ajax("https://api.github.com/repositories/" + id, {
                dataType: "json"
            }).done(function(data) { callback(data); });
        }
    },
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

स्रोत दस्तावेज़: Select2 - 3.5.3

Answer 22

बस किसी और को जोड़ने के लिए जो मेरे साथ एक ही मुद्दे के साथ आया हो सकता है।

मैं अपने गतिशील लोड विकल्पों (AJAX से) के चयनित विकल्प को सेट करने का प्रयास कर रहा था और कुछ तर्क के आधार पर चयनित विकल्पों में से एक को सेट करने का प्रयास कर रहा था।

मेरा मुद्दा इसलिए आया क्योंकि मैं उस आईडी के आधार पर चयनित विकल्प को सेट करने की कोशिश नहीं कर रहा था, जिसे मूल्य से मेल खाने की जरूरत है, न कि नाम से मेल खाने वाले मूल्य की!

Answer 23

कई मूल्यों के लिए कुछ इस तरह से:

$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));

जो कुछ इस तरह से अनुवाद करेगा

$("#HouseIds").select2("val", [35293,49525]);

Answer 24

संपादन के लिए डेटा लोड करते समय ( एकल या बहु-चयन के लिए लागू होता है) यह किसी को AJAX से चुनिंदा 2 डेटा लोड करने में मदद कर सकता है ) :

मेरे फॉर्म / मॉडल लोड के दौरान:

  $.ajax({
        type: "POST",
        ...        
        success: function (data) {
          selectCountries(fixedEncodeURI(data.countries));
         }

Select2 के लिए डेटा का चयन करने के लिए कॉल करें:

var countrySelect = $('.select_country');
function selectCountries(countries)
    {
        if (countries) {
            $.ajax({
                type: 'GET',
                url: "/regions/getCountries/",
                data: $.param({ 'idsSelected': countries }, true),

            }).then(function (data) {
                // create the option and append to Select2                     
                $.each(data, function (index, value) {
                    var option = new Option(value.text, value.id, true, true);
                    countrySelect.append(option).trigger('change');
                    console.log(option);
                });
                // manually trigger the `select2:select` event
                countrySelect.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });
        }
    }

और अगर आप एन्कोडिंग के साथ समस्या हो सकती है तो आप अपनी आवश्यकता के अनुसार बदल सकते हैं:

function fixedEncodeURI(str) {
        return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");

    }

Answer 25

अगर आपको कॉल करने से पहले अपने मान ऐजैक्स से मिल रहे हैं

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');

पुष्टि करें कि ajax कॉल पूरा हो गया है, जब jquery फ़ंक्शन का उपयोग कर रहा है

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
      // the code here will be executed when all four ajax requests resolve.
      // a1, a2, a3 and a4 are lists of length 3 containing the response text,
      // status, and jqXHR object for each of the four ajax calls respectively.
    }); 

जैसा कि यहाँ वर्णित है [ सभी jQuery के Ajax अनुरोध किए जाने तक प्रतीक्षा करें?

Answer 26

@ Tomloprod के उत्तर का ontop बनाने के लिए। इस विषम संभावना के द्वारा कि आप x- editable का उपयोग कर रहे हैं , और एक select2 (v4) फ़ील्ड है और आपके पास पूर्व-चयन के लिए कई आइटम हैं। आप निम्नलिखित कोड का उपयोग कर सकते हैं:

$("#select2field").on("shown", function(e, editable){
    $(["test1", "test2", "test3", "test4"]).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});

और यहाँ यह कार्रवाई में है:

var data = [
{
    id: 0,
    text: 'enhancement'
},
{
    id: 1,
    text: 'bug'
},
{
    id: 2,
    text: 'duplicate'
},
{
    id: 3,
    text: 'invalid'
},
{
    id: 4,
    text: 'wontfix'
}
];

$("#select2field").editable({
        type: "select2",
        url: './',
        name: 'select2field',
        savenochange: true,
        send: 'always',
        mode: 'inline',
        source: data,
        value: "bug, wontfix",
        tpl: '<select style="width: 201px;">',
        select2: {
            width: '201px',
            tags: true,
            tokenSeparators: [',', ' '],
            multiple: true,
            data:data
        },
        success: function(response, newValue) {
            console.log("success")
        },
        error: function(response, newValue) {
            if (response.status === 500) {
                return 'Service unavailable. Please try later.';
            } else {
                return response.responseJSON;
            }
        }
    });

var preselect= [
    {
        id: 1,
        text: 'bug'
    },
    {
    id: 4,
    text: 'wontfix'
}
];

 $("#select2field").on("shown", function(e, editable){
    $(preselect).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<a id="select2field">bug, wontfix</a>

मुझे लगता है कि अगर आप x- संपादन योग्य का उपयोग नहीं कर रहे हैं तो भी यह काम करेगा। मुझे उम्मीद है कि htis किसी की मदद कर सकता है।

Answer 27

आप इस कोड का उपयोग कर सकते हैं:

    $('#country').select2("val", "Your_value").trigger('change');

Your_value के बजाय अपना इच्छित मान रखें

आशा है कि यह काम करेगा :)

Answer 28

अच्छा और आसान:

document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";

और आप id_cityअपने सेलेक्ट आईडी में बदल जाते हैं।

संपादित करें: ग्लेन की टिप्पणी के बाद मुझे एहसास हुआ कि मुझे यह बताना चाहिए कि यह मेरे लिए क्यों और कैसे काम करता है:

मैंने select2अपने फॉर्म के लिए काम करना बहुत अच्छा बना दिया था । केवल एक चीज जिससे मैं काम नहीं कर सकता था वह था संपादन करते समय वर्तमान चयनित मूल्य दिखाना। यह तीसरे पक्ष के एपीआई की खोज कर रहा था, नए और पुराने रिकॉर्ड को सहेज रहा था। थोड़ी देर बाद मुझे एहसास हुआ कि मुझे सही तरीके से मूल्य निर्धारित करने की आवश्यकता नहीं है, केवल फ़ील्ड के अंदर लेबल, क्योंकि यदि उपयोगकर्ता फ़ील्ड नहीं बदलता है, तो कुछ भी नहीं होता है। बहुत से लोगों को इससे परेशान होने की खोज करने और देखने के बाद, मैंने इसे शुद्ध जावास्क्रिप्ट के साथ बनाने का फैसला किया। यह काम किया और मैंने किसी की मदद करने के लिए पोस्ट किया। मैं इसके लिए एक टाइमर सेट करने का सुझाव भी देता हूं।

Comments

यह उत्तर एक भयानक हैक है जो मूल्य को सही ढंग से सेट नहीं करेगा।

— Glen

मैं इस बारे में माफी चाहता हूं। मैंने अपना उत्तर यह बताने के लिए संपादित किया है कि मैंने इसे क्यों पोस्ट किया है।

— बोनाफेरनोन्डो