JQuery এর সাথে জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে নির্বাচন থেকে বিকল্পগুলিতে যুক্ত করার সর্বোত্তম উপায় কী?

1379

<select>JQuery ব্যবহার করে একটি জাভাস্ক্রিপ্ট অবজেক্ট থেকে বিকল্পগুলির যোগ করার সর্বোত্তম পদ্ধতিটি কী ?

আমি এমন কিছু সন্ধান করছি যা করার জন্য আমার কোনও প্লাগইন দরকার নেই, তবে আমি যে প্লাগইনগুলি আছে সেগুলিতেও আগ্রহী।

এটি আমিই করেছি:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

একটি পরিষ্কার / সহজ সমাধান:

এটি মাতডুমসার একটি সাফ ও সরলিকৃত সংস্করণ :

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

মাতডুমসার থেকে পরিবর্তনগুলি: (1) অ্যাপেন্ড () এর অভ্যন্তরের বিকল্পের জন্য ঘনিষ্ঠ ট্যাগটি সরিয়ে নিয়েছে (2) বৈশিষ্ট্য / বৈশিষ্ট্যগুলিকে অ্যাপেন্ড () এর দ্বিতীয় প্যারামিটার হিসাবে মানচিত্রে সরানো হয়েছে।

— ড্যারিল হেইন
সূত্র

4

সম্ভবত সাহায্যের জন্য: টেক্সটেলা.এল.কোড / কোড / জ্যাকোরি / সিলেক্ট (এই প্রশ্নে আমি হোঁচট

— খাওয়ার

2

উপরে তালিকাভুক্ত পরিষ্কার সংস্করণটি কেবল জ্যাকুই 1.4+ এ কাজ করে। পুরানো সংস্করণগুলির জন্য ম্যাটডুমসার উত্তরের একটিটি ব্যবহার করুন

— থার্ড্রিক ওয়াকার

d মান: কী} {"মান" হওয়া উচিত: কী} যেমন মাতদুমসার উত্তরে দেখা যায়।

— নিক পি

আমি বিশ্বাস করি না তাই যেহেতু valueএকটি স্ট্রিং (এবং হার্ড কোডেড) এটি উদ্ধৃত করার দরকার নেই।

— ড্যারিল হেইন

1

শিরোনামটির পরিবর্তে হওয়া উচিত "jQuery যা JSON অবজেক্ট থেকে একটি নির্বাচনের বিকল্পগুলি যুক্ত করার সর্বোত্তম উপায় কী?

— ডাঃ ফ্রেড

1383

অন্যান্য উত্তরগুলির মতো, একটি jQuery ফ্যাশনে:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

— matdumsa
সূত্র

99

আমি প্রথমে $("#mySelect")কোনও ভারে বরাদ্দ করব , অন্যথায় $("#mySelect")লুপের অভ্যন্তরে প্রতিবার কল করা খুব অপব্যয়, যেমনটি ডিওএম আপডেট করে। Artzstudio.com/2009/04/jquery-performance-rules/…

— প্যাট্রিক

7

ভাল আপনি শুধু var mySelect = $("#mySelect") outside of the প্রতিটি লুপ করতে পারে । এটি অনেক বেশি দক্ষ হবে। কার্লের উত্তর নীচে দেখুন

— প্যাট্রিক

17

আরও ভাল jQuery শৈলীর জন্য আমার সুপারিশ: $ ('# mySelect')। অ্যাপেন্ড ($ ("<বিকল্প />") .ভাল (কী)। পাঠ্য (মান));

— FAjir

10

এই উত্তরের জনপ্রিয়তার সাথে উল্লেখ করা দরকার যে আপনার লুপগুলিতে ডোম আপডেটগুলি এড়ানো উচিত। jsperf.com/jquery-append-array-vs-string

— jthomas

6

এই উত্তরটি ভুল উদ্দেশ্যে করার কারণে এত বিভ্রান্তিকর ছিল ... attrএবং textএটি আসলে $('<option/>')-বজেক্টের পদ্ধতিগুলি

— phil294

268

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

এইভাবে আপনি কেবল একবার "DOM টিপুন"।

আমি নিশ্চিত নই যে সর্বশেষতম লাইনটিকে $ ('# মাই সিলেক্ট') এ রূপান্তর করা যায় কিনা। এইচটিএমএল (আউটপুট.জাইন ('')) কারণ আমি জিকিউরি ইন্টার্নালকে জানি না (সম্ভবত এটি এইচটিএমএলটিতে কিছু পার্সিং করে) পদ্ধতি)

— gpilotino
সূত্র

20

আপনার পদ্ধতিটি উপরের 'সঠিক' উত্তরের চেয়ে স্পষ্টতই দ্রুততর কারণ এটি খুব কম jQuery ব্যবহার করে।

— তেজ

4

"$ ('# mySelect') 'লাইনটি পান get (0) in Chrome এবং FF3.x এ কাজ করে তবে আই 7 তে নয় যতদূর আমি বলতে পারি

— ব্লু

19

যদি keyকিছু উক্তি থাকে বা এতে থাকে তবে এটি ভেঙে >, <যায়।

— নিকফ

3

এবং, আমার কাছে যদি দুটি বিকল্প থাকে যা আমি হারাতে চাই না। বিদ্যমান বিকল্পগুলিতে আমি কীভাবে এই নতুন বিকল্পগুলির মান যুক্ত করতে পারি?

— ভ্যানফ্যানেল

6

একটি ছোট উন্নতি হ'ল যোগ চিহ্নটি পরিবর্তে যোগ চিহ্নটি ব্যবহার করে কনকানেটেট করা যেমন: আউটপুট.পশ ('<বিকল্প মান = "', কী, '">', মান, '</ڪشن>');

— এমএম

202

এটি কিছুটা দ্রুত এবং ক্লিনার।

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

স্নিপেট প্রসারিত করুন

— rocktheroad
সূত্র

3

পারফেক্ট। এটি যুক্ত করতে, নির্বাচনের জন্য অতিরিক্ত বৈশিষ্ট্য যুক্ত করা যেতে পারে। ea। (সিলেক্ট ভ্যালু, ফাংশন (আইডি, মান, পাঠ্য) {$ ('# মাই সিলেক্ট')। সংযোজন );

— আইডোক

45

এটি think $ ('# মাই সিলেক্ট') `কে ক্যাশে করা আরও ভাল ধারণা হবে বলে মনে হয়, যাতে আপনি লুপের আগে একবার একবার সন্ধান করেন। বর্তমানে এটি প্রতিটি একক বিকল্পের জন্য ডিওএম অনুসন্ধান করছে।

— সুশান্ত -

@ সুশান্ত - সেটটি ছোট হলে এটি কতটা বড় পারফরম্যান্স হিট?

— ckarbass

3

@ কার্ববাস - আপনার ডিওএম কত বড় তা নির্ভর করে। এটিকে ভেরিয়েবলের কাছে নির্ধারণের জন্য খুব বড় এবং খুব কম প্রচেষ্টা, এসও-তে কোনও মন্তব্য লেখার চেয়ে যথেষ্ট কম!

— নিক এইচ 247

97

jQuery এর

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

ভ্যানিলা জাভাস্ক্রিপ্ট

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

— কার্ল হারবার্গ
সূত্র

4

এর Optionআগে কখনও এই বস্তুর কথা শুনিনি । এটি কি সমস্ত ব্রাউজারে অন্তর্নির্মিত?

— ড্যারিল হেইন

2

আমি ব্যবহার করার চেষ্টা করেছি new Option, কিন্তু দেখেছি এটি আই 6 এবং 7 এ কাজ করে না। আমার কোনও কারণ নেই, তবে সম্পূর্ণ jQuery বিকল্পগুলির অনেকগুলি কাজ করেছে।

— ড্যারিল হেইন

নির্বাচন যোগ করার জন্য দুর্দান্ত উপায়। new Option('display', value, true)

— নৌকোডার

@ মার্ক0978 আসলে এটি new Option('display', value, true, true)( javascriptkit.com/jsref/select.shtml )

— কার্ল হারবার্গ

38

আপনার যদি পুরানো আইই সংস্করণগুলি সমর্থন না করতে হয় তবে Optionকনস্ট্রাক্টরটি স্পষ্টভাবে চলার উপায়, একটি পঠনযোগ্য এবং দক্ষ সমাধান :

$(new Option('myText', 'val')).appendTo('#mySelect');

এটি এর কার্যকারিতা সমতুল্য, তবে এর চেয়ে পরিষ্কার:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

— নিকোলে
সূত্র

31

এটি দেখতে সুন্দর লাগে, পাঠযোগ্যতা সরবরাহ করে তবে অন্যান্য পদ্ধতির তুলনায় ধীর।

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

আপনি যদি গতি চান, দ্রুততম (পরীক্ষিত!) উপায় হ'ল অ্যারে ব্যবহার করে, স্ট্রিং কনটেনটেশন নয় এবং কেবল একটি অ্যাপেন্ড কল ব্যবহার করুন।

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

— m1sfit
সূত্র

এর অর্থ কি এই নয় যে "দ্রুততম" উপায়টি বিভিন্ন স্ট্রিং অংশগুলি স্বতন্ত্র অ্যারে আইটেম হিসাবে সন্নিবেশ করানো হবে, অ্যারেতে প্রবেশের আগে প্রতিটি বিকল্পের সমন্বিত অংশগুলিকে সম্মতি না দিয়ে, যেহেতু তারা সমস্তভাবেই যাইহোক এক হিসাবে যুক্ত হবে?

— বিটুলিয়ান

22

পুরানো @ জোশপেরির উত্তরের একটি পরিমার্জন :

দেখে মনে হচ্ছে যে সমান। অ্যাপেন্ডও প্রত্যাশার মতো কাজ করে,

$("#mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

বা আরও ছোট,

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

— Сухой27
সূত্র

আপনি বিকল্পভাবে এর $.weakmapজন্য অনুমতি দিতে ব্যবহার করতে পারেনGC

— শেফ_কোড

2

কমনীয়তার জন্য বোনাস পয়েন্টগুলি: যথাযথভাবে map()কনস্ট্রাক্টটি ব্যবহার করে সম্পত্তিটির সাথে মিলিয়ে append()অবজেক্টগুলির একটি অ্যারে সঠিকভাবে যুক্ত করতে হবে!

— জোখেম শুলেনক্লাপ্পার

প্রযুক্তিগত সংশোধন / আপডেট প্রত্যাশার সাথে আমি জোশ্পেরি আমি হতাশ

— Dec27

20

এই সমস্ত উত্তর অযথা জটিল বলে মনে হচ্ছে। তোমার যা দরকার তা হল:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

এটি সম্পূর্ণ ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ।

— সর্বপ্রাণবাদ
সূত্র

এটা করা উচিত new Option(value, key);? পরামিতি অর্ডার বিকল্প (text_visible_part, value_behind_the_scenes) হয়।

— বব স্টেইন

অ্যারে পুশ কি ক্রস-ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয়? তারপরে, অ্যারে পুশ যখন আরও বেশি পঠনযোগ্য হয়, তখন কি এটি অযৌক্তিক জটিল নয়?

— বিটুলিয়ান

18

অবিচল থাকুন ... আমি অ্যান্ড্রয়েড 2.2 (সায়ানোজেন 7.0.1) ফোন (টি-মোবাইল জি 2) এ ফোনগ্যাপ ০.০.০ এর সাথে jQuery মোবাইল 1.0b2 ব্যবহার করছি এবং কিছুতেই কাজ করার জন্য। অ্যাপেন্ড () পদ্ধতিটি পাইনি। আমাকে নীচের মতো .html () ব্যবহার করতে হয়েছিল:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

— জ্যাক হোল্ট
সূত্র

18

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

আমি কয়েকটি পরীক্ষা করেছি এবং এটি আমার বিশ্বাস, কাজটি দ্রুততম করে। : P: P

— Teej
সূত্র

1

.এইচ একই ফলাফল অর্জনের অন্যান্য পদ্ধতির তুলনায় কুখ্যাতভাবে ধীর। এটি আমি যা ভাবছিলাম এবং এই পদ্ধতির সুপারিশ করব।

— অ্যালেন টেলিজ 6'15

এটি দুর্ভাগ্যজনক যে এখানে 90% প্রকরণগুলি $ .each () ব্যবহার করে। () এর জন্য লুপ আপনাকে কম বেশি কমপ্যাক্ট করেও আরও অনেক বেশি নিয়ন্ত্রণ এবং কার্যকারিতা সুবিধা দিতে পারে।

— হোল্ডঅফহাঙ্গার

15

মাইক্রোসফ্ট টেম্প্লেটিং পদ্ধতির সাহায্যে এমন একটি পদ্ধতির ব্যবহার রয়েছে যা বর্তমানে jQuery কোরটিতে অন্তর্ভুক্তির প্রস্তাবাধীন রয়েছে। টেম্প্লেটিং ব্যবহার করার মতো আরও ক্ষমতা রয়েছে তাই সাধারণ দৃশ্যের জন্য এটি সর্বোত্তম বিকল্প নাও হতে পারে। আরও তথ্যের জন্য স্কট গুয়ের পোস্টে বৈশিষ্ট্যগুলি রূপরেখার দেখুন।

প্রথম টেমপ্লেট JS ফাইল, থেকে পাওয়া অন্তর্ভুক্ত GitHub ।

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

পরবর্তী একটি টেম্পলেট সেট আপ করুন

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

তারপরে আপনার ডেটা দিয়ে .reender () পদ্ধতিতে কল করুন

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

আমি এই পদ্ধতিটি আরও বিশদে ব্লগ করেছি ।

— নিক জোসেভস্কি
সূত্র

12

আমি এজাক্সের মাধ্যমে ড্রপডাউন আইটেমটি লোড করে এরকম কিছু তৈরি করেছি । উপরের প্রতিক্রিয়াটিও গ্রহণযোগ্য, তবে আরও ভাল পারফরম্যান্সের জন্য যতটা সম্ভব DOM সংশোধন করা সর্বদা ভাল।

সুতরাং প্রতিটি আইটেম লুপের মধ্যে যুক্ত না করে লুপের মধ্যে আইটেম সংগ্রহ করা এবং এটি শেষ হয়ে গেলে এটি যুক্ত করা ভাল।

$(data).each(function(){
    ... Collect items
})

এটি যোগ করুন,

$('#select_id').append(items);

বা আরও ভাল

$('#select_id').html(items);

— Komang
সূত্র

$ ( '# select_id') HTML (আইটেম)। আমি কীভাবে চেয়েছিলাম ঠিক সেভাবে কাজ করেছিল app তোমাকে অনেক ধন্যবাদ.

— দীপান্বিতা দাস

10

সহজ উপায়টি হ'ল:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

— উইলার্ড ম্যাকে
সূত্র

আমি ইতিমধ্যে আমার বিকল্প তালিকা তৈরি করেছি, তাই নির্বাচিত ক্ষেত্রটি পপুলেটিং উইলার্ডের মতোই সহজ ছিল।

— Loony2nz

10

অন্যান্য উত্তরগুলির বেশিরভাগই eachফাংশনটি ব্যবহার করে পুনরাবৃত্তি করে toselectValues । এটির জন্য প্রতিটি উপাদানটির জন্য সংযোজন করা প্রয়োজন এবং প্রতিটি স্বতন্ত্রভাবে যুক্ত করা হলে একটি রিফ্লো ট্রিগার হয়ে যায়।

মানচিত্র এবং একটি উপাদান নির্মাতা ব্যবহার করে তৈরি করা উপাদানের appendঅ্যারে সহ কেবলমাত্র একবার কল করার জন্য এই উত্তরটিকে আরও প্রাসঙ্গিক কার্যকরী পদ্ধতিতে (আধুনিক জেএস ব্যবহার করে) আপডেট করা যেতে পারে ।optionOption

একটি Optionডিওএম উপাদান ব্যবহারের ফলে ফাংশন কল ওভারহেড হ্রাস করা উচিত কারণ optionতৈরির পরে উপাদানটি আপডেট করার প্রয়োজন নেই এবং jQuery এর বিশ্লেষণ যুক্তি চালানোর প্রয়োজন নেই।

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

আপনি যদি কোনও কারখানার ইউটিলিটি ফাংশন তৈরি করেন যা একটি বিকল্প অবজেক্টকে নতুন করে তুলবে: এটি আরও সরল করা যেতে পারে:

const newoption = (...args) => new Option(...args)

তারপরে এটি সরাসরি সরবরাহ করা যেতে পারে map:

$('mySelect').append($.map(selectValues, newoption))

পূর্ববর্তী সূত্র

যেহেতু appendমানগুলিকে আর্গুমেন্টের একটি পরিবর্তনশীল সংখ্যক হিসাবে পাস করার অনুমতি দেয়, আমরা optionউপাদানগুলির মানচিত্রের তালিকাটি পূর্ববর্তী করতে এবং ব্যবহার করে তাদেরকে একক কলে আর্গুমেন্ট হিসাবে যুক্ত করতে পারি apply।

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

দেখে মনে হচ্ছে jQuery-র পরবর্তী সংস্করণগুলিতেও appendএকটি অ্যারে যুক্তি গ্রহণ করা হয় এবং এটি কিছুটা সহজ করা যায়:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

— joshperry
সূত্র

10

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}

এটি jQuery 1.4.1 এর সাথে ভালভাবে কাজ করে।

এএসপি.নেট এমভিসি এবং জিকুয়েরির সাথে গতিশীল তালিকা ব্যবহারের জন্য সম্পূর্ণ নিবন্ধের জন্য:

এমভিসি এবং jQuery সহ গতিশীল নির্বাচন করুন তালিকা

— এইচ সাম্পাট
সূত্র

8

ক্রোমে এই সমাধানটির সাথে বাছাইয়ের সমস্যা রয়েছে (jQuery 1.7.1) (ক্রোম নাম / সংখ্যা অনুসারে বস্তুর বৈশিষ্ট্যগুলি সাজায়?) সুতরাং অর্ডারটি রাখতে (হ্যাঁ, এটি আপত্তিজনক অবজেক্ট), আমি এটি পরিবর্তন করেছি:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

এই

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

এবং তারপরে $ .এইচ দেখতে পাবেন:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
});

— Michail
সূত্র

8

সর্বত্র একই কোডটি পুনরাবৃত্তি করার পরিবর্তে, আমি আপনার নিজের jQuery ফাংশনটি লেখার জন্য এটি আরও আকাঙ্ক্ষিত বলে পরামর্শ দেব:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

তারপরে একটি বিকল্প যুক্ত করতে কেবল নিম্নলিখিতটি করুন:

$('select').addOption('0', 'None');

— ঔজ্বল্যহীন
সূত্র

আপনি বিস্তারিত বলতে পারেন?

— মো।

7

আপনি নিম্নলিখিত কোডটি সহ আপনার জসন অ্যারেতে পুনরাবৃত্তি করতে পারেন

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

— কাসিফ
সূত্র

7

যদিও পূর্ববর্তী উত্তরগুলি সমস্ত বৈধ উত্তর - এটি প্রথমে কোনও ডকুমেন্টফ্রেগনেট এ সমস্ত যুক্ত করার পরামর্শ দেওয়া হতে পারে, তারপরে সেই নথির খণ্ডটিকে একটি উপাদান হিসাবে যুক্ত করুন ...

বিষয়টি নিয়ে জন রেসিগের চিন্তাভাবনাগুলি দেখুন ...

এর লাইন ধরে কিছু:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

— Stuart.Sklinar
সূত্র

7

$.eachএকটি forলুপ চেয়ে ধীর
প্রতিবার, কোনও ডিওএম নির্বাচন লুপের সেরা অনুশীলন নয় $("#mySelect").append();

সুতরাং সবচেয়ে ভাল সমাধান নিম্নলিখিত

যদি JSON ডেটা respহয়

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

হিসাবে এটি ব্যবহার করুন

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

— MaxEcho
সূত্র

6

এটি করার আরেকটি উপায়:

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

— DiverseAndRemote.com
সূত্র

আমি এখানে আপনি কি করেছেন তা দেখুন ... আপনি পরামর্শটি ক্যাশে নিয়ে গিয়েছিলেন $('#mySelect')তবে @ রকথেরোড উত্তরটি রিফ্যাক্ট করলেন ... যাই হোক না কেন এটিই আরও ব্যবহারিক সমাধান

— শেফ_কোড

6

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

এটি প্রথমে বিশালাকার স্ট্রিং তৈরির পরে একবার ডমকে হেরফের করে।

— খ্রিস্টান রোমান
সূত্র

আপনি এই বিষয়ে আরও নিখুত এবং পুরাপুরি প্রতিস্থাপন jQuery এর ব্যবহার এড়াতে পারেন $("#myselect").empty().append(opts);সঙ্গেgetElementById('myselect').innerHtml = opts;

— vahanpwns

6

আমি দ্বি-মাত্রিক অ্যারেগুলি দিয়ে এটিই করেছি: প্রথম কলামটি আইটেম আই innerHTMLএর সাথে যুক্ত করুন <option>। দ্বিতীয় কলামটি রেকর্ড_আইডি, এর মধ্যে যুক্ত valueকরুন <option>:

পিএইচপি

$items = $dal->get_new_items(); // Gets data from the database
$items_arr = array();
$i = 0;
foreach ($items as $item)
{
    $first_name = $item->first_name;
    $last_name = $item->last_name;
    $date = $item->date;
    $show = $first_name . " " . $last_name . ", " . $date;
    $request_id = $request->request_id;
    $items_arr[0][$i] = $show;
    $items_arr[1][$i] = $request_id;
    $i++;
}

echo json_encode($items_arr);

জাভাস্ক্রিপ্ট / আয়াক্স

        function ddl_items() {
            if (window.XMLHttpRequest) {
                // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                xmlhttp=new XMLHttpRequest();
            }
            else{
                // Code for Internet Explorer 6 and Internet Explorer 5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var arr = JSON.parse(xmlhttp.responseText);
                var lstbx = document.getElementById('my_listbox');

                for (var i=0; i<arr.length; i++) {
                    var option = new Option(arr[0][i], arr[1][i]);
                    lstbx.options.add(option);
                }
            }
        };

        xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
        xmlhttp.send();
    }
}

— নোনতা
সূত্র

ভাল লাগছে। খুব খারাপ এটি jQuery ব্যবহার করছে না। এছাড়াও, আমার আগে সিলেকশন.অপশন.অ্যাড () পদ্ধতিটি ছিল। কোন ব্রাউজার এবং সঠিক সমস্যাটি স্মরণ করতে পারছি না, তবে আমি এ থেকে কিছুটা এগিয়ে যাওয়ার এবং পার্থক্যগুলি মোকাবেলা করার জন্য jQuery কে সিদ্ধান্ত নেওয়ার সিদ্ধান্ত নিয়েছি।

— ড্যারিল হেইন

পিএইচপি এবং জিকুয়েরি সহ মোট নুব, তবে উপরের কোডটি সমস্ত ব্রাউজারে কাজ করছে। একমাত্র সমস্যা - এটি আইফোনে ভাল কাজ করছে না, আমি এ সম্পর্কে একটি প্রশ্ন পোস্ট করেছি, এখন পর্যন্ত ভাগ্য নেই :( স্ট্যাকওভারফ্লো.com

— সালটি

6

একটি jQuery প্লাগইন এখানে পাওয়া যাবে: jQuery এবং AJAX ব্যবহার করে বাক্স নির্বাচন করুন ।

— lkahtz
সূত্র

5

আমি দেখতে পেয়েছি যে এটি সহজ এবং দুর্দান্ত কাজ করে।

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

— DW333
সূত্র

4

JSON ফর্ম্যাট:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

এবং jQuery কোডটি অ্যাজাক্স সাফল্যের উপর ড্রপডাউনতে মানগুলি স্থাপন করতে:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

— এমজে
সূত্র

3

Ma .map () ফাংশনটি ব্যবহার করে আপনি এটি আরও মার্জিত উপায়ে করতে পারেন:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

— ফ্রেডের ডা
সূত্র

এটি এক ধরণের সংক্ষিপ্ত, তবে একটি সমস্যা হ'ল ভাল এবং কী ওয়ার্সগুলি পালনের সাথে সম্পর্কিত যা গ্রহণযোগ্য উত্তরগুলি করে।

— ড্যারিল হেইন

2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

— সত্যেন্দ্র যাদব
সূত্র

2

নিম্নলিখিত এইচটিএমএল আপনার এইচটিএমএল নির্বাচন আইডি সেট করুন। এখানে mySelectনির্বাচনের উপাদানগুলির আইডি হিসাবে ব্যবহৃত হয়।

   var options = $("#mySelect");

তারপরে এই দৃশ্যে যা নির্বাচিত মান রয়েছে সেই বস্তুটি পান এবং প্রতিটি লুপের জন্য এটি jquery এ সেট করুন। এটি সেই অনুযায়ী অবজেক্টের মান এবং পাঠ্য ব্যবহার করবে এবং নীচে এটি বিকল্প নির্বাচনের সাথে যুক্ত করবে।

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

ড্রপ ডাউন তালিকাটি নির্বাচিত হওয়ার পরে এটি বিকল্পের তালিকা হিসাবে পাঠ্য প্রদর্শিত হবে এবং একবার পাঠ্য নির্বাচিত পাঠ্যের মান নির্বাচন করা হবে।

যেমন।

"1": "পরীক্ষা 1", "2": "পরীক্ষা 2",

ড্রপডাউন সমেত,

প্রদর্শনের নাম: পরীক্ষার 1 -> মান 1 প্রদর্শনের নাম: পরীক্ষা 2 -> মান 2 হয়

— ডুলিথ দে কস্তা
সূত্র

সমাধান সম্পর্কে কিছুটা বর্ণনা করুন।

— বিনয় প্রজাপতি

2

আসলে, উন্নত পারফরম্যান্স পাওয়ার জন্য, বিকল্প তালিকা আলাদাভাবে তৈরি করা এবং আইডি নির্বাচন করতে যুক্ত করা ভাল।

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/

— shohan
সূত্র