Jquery select2 এর নির্বাচিত মান কীভাবে সেট করবেন?

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পূর্বনির্ধারিত মানটি নির্বাচন করতে একই নির্বাচন মেনুতে উপস্থিত হবে ( কিন্তু) আমি কোনও উপায় খুঁজে পাচ্ছি না।

হালনাগাদ:

এইচটিএমএল কোড:

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

নির্বাচন 2 প্রোগ্রাম্যাটিক অ্যাক্সেস এটি দিয়ে কাজ করে না।

Comments

আপনি কেবল এইচটিএমএলে বা নির্বাচিত মানটি ব্যবহার করতে সক্ষম হবেন$("#programid").val()

— বিস্ফোরণ পিলগুলি

এক্সপ্লোশনপিলস নেতিবাচক, আমি চেষ্টা করেছিলাম যে আমিও একটি ফাঁকা মূল্য পেয়েছি। প্রোগ্রামিড.ওয়াল () কীভাবে ব্যবহার করব? আমি সার্ভার থেকে মানটি পেয়েছি তারপরে আমার এটি নির্বাচনের 2 এর লুকানো ক্ষেত্রে সেট করা দরকার।

— ক্লিয়ারবোথ

@ ক্লিয়ারবোথ নিশ্চিত নন যে আপনি কী বলতে চাইছেন তা আমি পেয়েছি কিনা। আপনি কি এজেএক্স-পুনরুদ্ধারকৃত ফলাফলগুলির মধ্যে একটিতে সিলেক্ট 2 উপাদানটির "নির্বাচিত" মান সেট করার চেষ্টা করছেন?

— একটি ফান

@ আনফান হ্যাঁ, এটি করার কোনও উপায় আছে?

— ক্লিয়ারবোথ

নিবন্ধন করুন আমার উত্তর নীচে পরীক্ষা করুন।

— একটি ফান

Answer 1

একটি নির্বাচন 2 উপাদানটির "নির্বাচিত" মানটি গতিশীলভাবে সেট করতে:

$('#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'});

ধন্যবাদ @ নুবিশপ্রো

Comments

আমি আইডিটি কেবল সিলেক্ট 2 ('ভাল', '1') দিয়ে চেষ্টা করছিলাম তবে এটি কার্যকর হয়নি .. ধন্যবাদ

— ক্লিয়ারবোথ

এটি কাজ করে, কেবলমাত্র নোট করতে চেয়েছিল যে নতুন সিলেক্ট 2-এ, "a_key" একটি স্ট্যান্ডার্ড সিলেক্ট 2 অবজেক্টে "টেক্সট"। সুতরাং: {আইডি: 100, পাঠ্য: 'Lorem Ipsum'}

— NoobishPro

এখানে v4 একই। এই এক উপর আমার চুল টানছে। আমি জাভাস্ক্রিপ্ট সমাধান না করে এটি সম্ভব বলে মনে করি না। এখনই অন্য জিকুয়েরি / বুটস্ট্র্যাপ সিলেক্ট 2 ড্রপডাউন খুঁজছেন (প্রতিটি কল্পনাযোগ্য পদ্ধতিতে বিড়ম্বনার 2 দিন - কোনও আনন্দ নেই!)

— এমসি 9000

নির্বাচন 2 ভি 4: সিলেক্ট 2.github.io/…$('#inputID').val(100).trigger('change') দেখুন

— পল

@ নুনবিশপ্রো এবং আন ফান - উত্তর এবং মন্তব্যের জন্য ধন্যবাদ

— সিনটো

Answer 2

নির্বাচন 2 <ভি 4

---

পদক্ষেপ # 1: এইচটিএমএল

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

পদক্ষেপ # 2: নির্বাচন 2 এর একটি উদাহরণ তৈরি করুন

$("#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!"});

---

আপনি যদি এজেএক্স ছাড়াই সিলেক্ট 2 ব্যবহার করেন তবে আপনি নিম্নলিখিত হিসাবে করতে পারেন:

<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");

---

নির্বাচন 2 ভি 4

---

জন্য select2 V4 আপনি সরাসরি একটি বিকল্প সংযুক্ত করতে পারবেন / ফলো হিসেবে S:

<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

ট্রিগার ('পরিবর্তন'); গুরুত্বপূর্ণ অংশটি

— মিহকভ

"(" # #Select2 ")। select2 (" ভাল "," 0 ") - এটি মান পরিবর্তনের jquery ইভেন্টকে ট্রিগার করবে। কীভাবে এটি হওয়া থেকে রোধ করা যায়। সাধারণত যখন ব্যবহারকারী ফর্ম জমা দেয়, কাজ শেষ হয়ে যায়, তখন আমি সমস্ত ফর্ম ডেটা পুনরায় সেট করি। রিসেট নির্বাচন 2 রিসেট করবে না। সিলেক্ট 2 ("ভাল", "0") ব্যবহার করে এমন পরিবর্তনগুলি ট্রিগার হবে যা ব্যবহারকারীর কাছ থেকে কোনও পদক্ষেপ না বলে পাগল।

— জাম্পার rbk

সংস্করণ 4 সিলেক্ট 2.org/programmatic-control/add-select-clear-items

— রায়ান

.ট্রিগার ('পরিবর্তন') এর জন্য প্রশংসিত

— জেপি ডলোকানোগ

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

— ভালের

প্রশ্নটি ছিল এজেএক্স কল লোড করার পরে এটি কীভাবে করা যায়। এই উত্তরটি এই ক্ষেত্রে কার্যকর হয় না।

— এমসি 9000

এটি সিলেক্ট 2 মান পরিবর্তনগুলি ট্রিগার করবে যা আপনার যদি প্রক্রিয়া করার জন্য এই ইভেন্টটি থাকে তবে অদ্ভুত হবে এবং এটি ব্যবহারকারী ব্যবহার না করেই শুরু হয়েছিল

— জাম্পার আরবিকে

Answer 4

এছাড়াও আমি যেমন চেষ্টা করেছি, যখন সিলেক্ট 2-এ এজ্যাক্স ব্যবহার করি, সিলেক্ট 2-তে নতুন মান নির্ধারণের জন্য প্রোগ্রামেটিক কন্ট্রোল পদ্ধতিগুলি আমার পক্ষে কাজ করে না! সমস্যার সমাধানের জন্য এখন আমি এই কোডগুলি লিখছি:

$('#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

আমি বিভিন্ন ডিসপ্লেকি এবং স্টাফ ব্যবহার করছি (যদিও এটি খারাপ ধারণা ছিল) - এটি কোডসেপিংয়ের সাথে আমার গ্রহণযোগ্যতা পরীক্ষার জন্য পুরোপুরি সহায়তা করে

— MonkeyMonkey

বিরক্তিকর, অবশ্যই, তবে, সবাই যেমন সलेक्ट 2 ভি 4 এর সন্ধান করে ডিফল্ট নির্বাচন নির্ধারণ করার মতো হাস্যকরভাবে কিছু করার সহজ উপায় নেই

— MC9000

আমি এই উত্তরটি সलेक्ट 2 ভি 4 করার একমাত্র উপায় হিসাবে পেয়েছি - এজ্যাক্স নির্বাচন করুন।

Answer 5

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

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

এই সংযোজনটি চেষ্টা করুন তারপরে নির্বাচন করুন। AJAX কল করার পরে বিকল্পটির সদৃশ হয় না।

Comments

var $ অপশন = $ ("<অপশনটি নির্বাচিত> </option>")। ওভাল ('1') text $ ('# সিলেক্ট_আইডি')। সংযোজন ($ বিকল্প) .ট্রিগার ('পরিবর্তন');

— জিগজ

ধন্যবাদ সংস্করণ 4.0.0 (আজাক্স কল) এ কাজটি নিশ্চিত করেছেন

— খালিল

এজ্যাক্স সহ 4 সংস্করণে আরও একটি সাফল্য নিশ্চিত হয়েছে।

— একটি কোডার

আপনি যদি এজ্যাক্স সহ সন্ধানযোগ্য বাক্সটি ব্যবহার করেন তবে এটি সঠিক সমাধান। এটি আমার জন্য জুন 2019 কাজ করেছিল।

— এরিক স্কিফ

Answer 6

আমি এটি পছন্দ করেছি-

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

Comments

আপনার কোডটি কীভাবে কাজ করে তা ব্যবহারকারীদের বুঝতে এবং ওপির প্রশ্নের উত্তর দিতে দয়া করে কিছু ব্যাখ্যা সরবরাহ করুন provide

— ইভান

@ ইভান, আমি এই জাতীয় "(" # ড্রপ সার্ভিসস ") করছিলাম val ভাল (" 0 "); যা সিলেক্ট 2 ড্রপডাউনে টেক্সট নির্বাচন করবে না, মান এবং পাঠ্য উভয়কেই প্রভাবিত করার জন্য আমাদের সিলেক্ট 2 এর ট্রিগার চেঞ্জ ফাংশন প্রয়োজন। এটি আমার জন্য নিখুঁতভাবে কাজ করছে। আমি আশা করি ব্যবহারকারীরা বুঝতে পারবেন।

— আশী

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

পরিবর্তন ইভেন্টটি ট্রিগার না করে আমি কীভাবে মান সেট করতে পারি? পরিবর্তন ইভেন্টটি আমার নিজের ইভেন্ট হ্যান্ডলারগুলিকে ট্রিগার করে যা ব্যবহারকারী যখন ম্যানুয়ালি মান পরিবর্তন করে।

— এনুমাগ

অন্য বিকল্পটি হ'ল destroyএবং আবার প্লাগইনটিকে আবার কল করুন .. আপডেট কোডটি দেখুন ..

— মোশ ফেউ

আমি প্রাথমিকভাবে সিলেক্ট 2 এ যে বিকল্পগুলি পেয়েছি সেগুলি পাওয়ার কি কোনও উপায় আছে যাতে আমাকে সেগুলি নকল করতে না হয়? যাইহোক এই সমাধানটি হ্যাকের মতো মনে হয়।

— enumag

অবশ্যই এটি হ্যাচ দস্তাবেজগুলির আনুষ্ঠানিক উপায় হ'ল পরিবর্তন ইভেন্টটি ট্রিগার করা। so that I wouldn't have to duplicate themকেন তাদের নকল করতে হবে? আপনি যখন destroyএটি করেন তখন selectতার সমস্ত কিছু এখনও আছে options।

— মোশ ফু

আমি বিকল্পগুলি $example.select2({ ... this ... })

— সিলেক্ট

Answer 8

আমার মনে হয় আপনার এই 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 9

অ্যাজাক্সের জন্য, ব্যবহার করুন $(".select2").val("").trigger("change")। যে সমস্যার সমাধান করা উচিত।

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');

আমি এই সহজ কোড দিয়ে আমার সমস্যা সমাধান করেছি। যেখানে # সিলেক্ট_লোকেশন_আইডি নির্বাচিত বাক্সের একটি আইডি এবং নির্বাচন 2 বাক্সে তালিকাবদ্ধ বিকল্পের মান।

Answer 14

একটি ফানের উত্তর আমার পক্ষে কাজ করেছে:

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

তবে পরিবর্তনটি যুক্ত করে ইভেন্টটি ট্রিগার করে

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

Comments

আমি "ত্রুটিযুক্ত টাইপ এরর: ত্রুটি পেয়েছি: $ (...)। নির্বাচন করুন 2 (...)। পরিবর্তনটি কোনও ফাংশন নয় (…)" এভাবে করার সময়। আমি সিলেক্ট 2 এর 4x সংস্করণ দিয়ে এটি সম্ভব বলে মনে করি না - এখানে কিছুই অজ্যাক্সের সাথে কাজ করে না।

— 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

আমি সিলেটের 2 এজ্যাক্স ড্রপডাউনে উপাদানগুলির পূর্বনির্ধারিত করার জন্য এর মতো কিছু করেছি

      //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
});

উত্স ডকুমেন্টেশন: নির্বাচন করুন 2 - 3.5

Answer 22

কেবল অন্য কারও সাথে যোগ করার জন্য যারা আমার সাথে একই সমস্যাটি নিয়ে আসতে পারে।

আমি আমার গতিশীল লোড করা বিকল্পগুলির (এজেএক্স থেকে) নির্বাচিত বিকল্পটি সেট করার চেষ্টা করছিলাম এবং কিছু যুক্তির উপর নির্ভর করে নির্বাচিত হিসাবে বিকল্পগুলির মধ্যে একটি সেট করার চেষ্টা করছিলাম।

আমার ইস্যুটি এলো কারণ আমি আইডির ভিত্তিতে নির্বাচিত বিকল্পটি সেট করার চেষ্টা করছিলাম না যা মানটির সাথে মেলে, মানটির সাথে মিলছে না!

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));
         }

সিলেক্ট 2 এর জন্য ডেটা নির্বাচন করতে কল করুন:

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');

যখন 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

@ টমলপ্রডের উত্তরের অনটপ স্থাপন করতে। আপনি এক্স-সম্পাদনযোগ্য ব্যবহার করছেন এবং আপনার একটি সিলেক্ট 2 (ভি 4) ক্ষেত্র রয়েছে এবং আপনার পছন্দ করার পূর্বে একাধিক আইটেম রয়েছে এমন বিজোড় সুযোগটি দ্বারা । আপনি নিম্নলিখিত কোডের টুকরা ব্যবহার করতে পারেন:

$("#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>

আমি অনুমান করি যে আপনি এক্স-সম্পাদনযোগ্য ব্যবহার না করলেও এটি কাজ করবে। আমি আশা করি যে এইচটিআইস কাউকে সাহায্য করতে পারে।

Answer 27

আপনি এই কোডটি ব্যবহার করতে পারেন:

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

আপনার পছন্দসই মানটি আপনার_মূল্যের পরিবর্তে রাখুন

আশা করি এটি কার্যকর হবে :)

Answer 28

সুন্দর এবং সহজ:

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

এবং আপনি id_cityআপনার নির্বাচনের আইডিতে পরিবর্তন করেন।

সম্পাদনা: গ্লেনের মন্তব্যের পরে আমি বুঝতে পারি যে এটি আমার জন্য কেন এবং কীভাবে কাজ করেছে তা আমার ব্যাখ্যা করা উচিত:

আমি select2আমার ফর্মের জন্য কাজ করেছিলাম সত্যিই সুন্দর। আমি যে কাজটি করতে পারি তা হ'ল সম্পাদনা করার সময় বর্তমান নির্বাচিত মানটি প্রদর্শন করা। এটি একটি তৃতীয় পক্ষের এপিআই অনুসন্ধান করেছিল, নতুন সংরক্ষণ এবং পুরানো রেকর্ড সম্পাদনা করছে। কিছুক্ষণ পরে আমি বুঝতে পারলাম আমার মানটি সঠিকভাবে সেট করার দরকার নেই, কেবল ক্ষেত্রের অভ্যন্তরের লেবেল, কারণ যদি ব্যবহারকারী ক্ষেত্রটি পরিবর্তন না করে তবে কিছুই ঘটে না। এটির সাথে অনেক লোকের অনুসন্ধান এবং অনুসন্ধান করার পরে, আমি এটি খাঁটি জাভাস্ক্রিপ্ট দিয়ে তৈরি করার সিদ্ধান্ত নিয়েছি। এটি কাজ করেছে এবং আমি সম্ভবত কারও সাহায্য করার জন্য পোস্ট করেছি। আমি এটির জন্য একটি টাইমার সেট করার পরামর্শ দিচ্ছি।

Comments

এই উত্তরটি একটি ভয়াবহ হ্যাক যা এমনকি মানটি সঠিকভাবে সেট করে না।

— গ্লেন

আমি ওই বিষয়ের দুঃখিত. আমি কেন পোস্ট করেছি তা ব্যাখ্যা করার জন্য আমি আমার উত্তর সম্পাদনা করব।

— Bonafernando