jQuery: ড্রপ ডাউন পপুলেট করার সেরা অনুশীলন?


267

আমি যে পোস্টটি দেখি তা সমস্ত সময় দেখে মনে হয় এটি সাবঅপটিমাল, কারণ এটিতে জড়িত স্ট্রিং জড়িত রয়েছে, যা jQuery বলে মনে হয় না। এটি সাধারণত এটির মতো দেখাচ্ছে:

$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        options += '<option value="' + result[i].ImageFolderID + '">' + result[i].Name + '</option>';
    }
});

একটি ভাল উপায় আছে কি?

উত্তর:


446

আন্দ্রেস গ্রেচ বেশ কাছাকাছি ছিল ... এটি আসলে this( thisলুপের আইটেমটির পরিবর্তে রেফারেন্সটি নোট করুন ):

var $dropdown = $("#dropdown");
$.each(result, function() {
    $dropdown.append($("<option />").val(this.ImageFolderID).text(this.Name));
});

5
প্রাচীন ইতিহাস এখানে আমি জানি, তবে আমার মতো গুগল যারা এখন এই বিষয়ে হোঁচট খেয়েছে, আপনি যদি <option/>প্রতিটি তৈরির পরিবর্তে কোনও উপাদানকে ক্লোন করে ফেলেছিলেন তবে আরও দ্রুত আর কী হবে না ?
টেডাররা

2
আমার মনে হয় না ... যেভাবেই এটি কোনও নতুন আইটেম ইনস্ট্যান্ট করবে।
কুইলব্রেকার

9
নিস! যদিও আমি মনে করি উপাদানটির নাম "#ডাউনডাউন" বা তার নামকরণ করা থাকলে উদাহরণটি আরও স্পষ্ট হতে পারে, যেহেতু এটি বিকল্পগুলির প্রকৃত অভিভাবক উপাদানকে আরও ভালভাবে প্রতিবিম্বিত করে।
Anders

4
আমি মনে করি মেমরির সমস্ত বিকল্পগুলি (স্ট্রিং ভেরিয়েবল সহ) প্রথমে তৈরি করা এবং তারপরে এই স্ট্রিংটিকে প্যারেন্ট সিলেক্ট কন্ট্রোলের সাথে যুক্ত করা আরও দক্ষ হওয়া উচিত, কারণ এটি কেবল একবার পৃষ্ঠা বিন্যাসের কারণ হবে
উইন্ট

1
বিজ্ঞপ্তি পেতে এবং কিছু না দেখলে দুঃখিত। আমি আমার আগের মন্তব্যগুলি মুছলাম। কারণ আমি নিজের মন্তব্যগুলি পড়ে উত্তরটি আরও বুঝতে
পেরেছি

71
$.getJSON("/Admin/GetFolderList/", function(result) {
    var options = $("#options");
    //don't forget error handling!
    $.each(result, function(item) {
        options.append($("<option />").val(item.ImageFolderID).text(item.Name));
    });
});

আমি উপরে যা করছি তা হচ্ছে একটি নতুন <option>উপাদান তৈরি করা এবং optionsতালিকায় এটি যুক্ত করা (ধরে optionsনেওয়া যে একটি ড্রপ ডাউন উপাদানটির আইডি।

পিএস আমার জাভাস্ক্রিপ্টটি কিছুটা মরিচা তাই সিনট্যাক্সটি নিখুঁত নাও হতে পারে


1
এটি বেশ কাছাকাছি, এবং আমাকে সঠিক দিকে নিয়ে গেছে। আমার উত্তর নীচে দেখুন।
জেফ পুত্জ

খুব সুন্দর! সত্যিই সহায়ক, আমি আমার ড্রপডাউনগুলি দীর্ঘদিন ধরেই জনসাধারণের মধ্যে রেখেছি এবং এটি সর্বদা পেশাদার মনে হয়নি
কাইল

41

অবশ্যই - optionsস্ট্রিংগুলির একটি অ্যারে তৈরি করুন এবং লুপের মাধ্যমে প্রতিবারের .join('')চেয়ে ব্যবহার করুন +=। বিপুল সংখ্যক বিকল্পের সাথে ডিল করার সময় সামান্য পারফরম্যান্স বাম্প ...

var options = [];
$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        options.push('<option value="',
          result[i].ImageFolderID, '">',
          result[i].Name, '</option>');
    }
    $("#theSelect").html(options.join(''));
});

হ্যাঁ. আমি এখনও পুরো সময় স্ট্রিং সঙ্গে কাজ করছি। বিশ্বাস করুন বা না করুন, এটি একটি ডিওএম খণ্ড তৈরির দ্রুততম উপায় ... এখন, যদি আপনার কাছে কেবল কয়েকটি বিকল্প থাকে তবে তা আসলেই কিছু যায় আসে না - আপনি যদি স্টাইলটি পছন্দ করেন তবে ড্রিয়াস যে কৌশলটি দেখায় তা ব্যবহার করুন । তবে মনে রাখবেন, আপনি ব্রাউজারের অভ্যন্তরীণ এইচটিএমএল পার্সার i*2সময়গুলি একবারের চেয়ে একবারের চেয়ে আহ্বান করছেন এবং প্রতিবার লুপের মাধ্যমে ডমকে সংশোধন করছেন ... পর্যাপ্ত সংখ্যক বিকল্প রয়েছে। আপনি এর জন্য অর্থ প্রদান শেষ করবেন, বিশেষত পুরানো ব্রাউজারগুলিতে।

নোট: বিচারপতি তুলে ধরে, এই পৃথক্ যদি পড়া হবে ImageFolderIDএবং Nameনেই সঠিকভাবে এনকোড ...


1
আপনার যথাক্রমে এনকোড result[i].ImageFolderIDএবং result[i].Nameএইচটিএমএল-বৈশিষ্ট্য-মান এবং এইচটিএমএল-পাঠ্য হওয়া উচিত । আমি ধরে নিব না যে তারা সার্ভারটি প্রাক-এনকোডযুক্ত থেকে এসেছে, যেহেতু আমি ধরে নেব যে সার্ভারটি জাসনকে জার্নি দেয় না, জার্সার্ডাইজড জসনকে দেয় না।
yfeldblum

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

1
আমি @ রিসিবাল্ড যে উত্তরটি দিয়েছি তার পক্ষে ভোট দিয়েছি কারণ আজব, আমি এই পরীক্ষার উপর ভিত্তি করে এসেছি, এটি দেখা যাচ্ছে যে joinকার্যত প্রতিটি ব্রাউজারের তুলনায় দ্রুতগতিতে দ্রুততা পাওয়া যায় ।
weir

24

অথবা হতে পারে:

var options = $("#options");
$.each(data, function() {
    options.append(new Option(this.text, this.value));
});

6
var myOptions = {val1: 'পাঠ্য 1', ভাল 2: 'পাঠ্য 2'}; ea .এচ (মায়ওপশনস, ফাংশন (ভাল, পাঠ্য) {$ ('# মাই সিলেক্ট')। সংযোজন (নতুন বিকল্প (পাঠ্য, ভাল));});
ডেমজ

19

দ্রুততম উপায় হ'ল:

 $.getJSON("/Admin/GetFolderList/", function(result) {
        var optionsValues = '<select>';
        $.each(result, function(item) {
            optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>';
        });
        optionsValues += '</select>';
        var options = $('#options');
        options.replaceWith(optionsValues);
    });

এই লিঙ্ক অনুসারে দ্রুততম উপায় কারণ যে কোনও ধরণের ডিওএম সন্নিবেশ করার সময় আপনি একটি একক উপাদানের মধ্যে সমস্ত কিছু মুড়ে রাখেন।


replaceWith সঙ্গে তবে আপনি DOM মধ্যে নির্বাচন একটি ঘটনা ইতিমধ্যে নির্বাচন আমি মনে করি এটা options.html (optionsValue) আপনি ঘটনা সংরক্ষণ করতে চান ভাল হবে সংযুক্ত হারান প্রতিস্থাপন
Geomorillo

12

আমি এটি jquery সাইট থেকে কাজ করে দেখেছি

$.getJSON( "/Admin/GetFolderList/", function( data ) {
  var options = $("#dropdownID");
  $.each( data, function(key, val) {
    options.append(new Option(key, val));
  });
});

5

আমি পড়েছি যে ডকুমেন্টের টুকরো টুকরোটি ব্যবহার করা পারফরম্যান্ট কারণ এটি ডম উপাদানটির প্রতিটি সন্নিবেশের উপর পৃষ্ঠার প্রতিস্থাপনকে এড়িয়ে চলে, এটি সমস্ত ব্রাউজারগুলি (এমনকি আই 6 6) দ্বারাও সমর্থিত।

var fragment = document.createDocumentFragment();

$.each(result, function() {
  fragment.appendChild($("<option />").val(this.ImageFolderID).text(this.Name)[0]);
});

$("#options").append(fragment);

আমি প্রথমে কোডস্কুলের জাভাস্ক্রিপ্ট সেরা অনুশীলন কোর্সে এটি পড়লাম

এখানে বিভিন্ন পদ্ধতির তুলনা করা হয়েছে, লেখকের কাছে ধন্যবাদ go


এটি অবশ্যই দ্রুতগতির উপায়। আরও ভাল - এই সমস্ত একসাথে jQuery এড়িয়ে যান:result.forEach(function(el){var option=document.createElement('option').option.textContent=el.name;option.value=el.ImageFolderID);fragment.appendChild(el);
ডিজিও

5

ES6 এর সাথে অন্যান্য পদ্ধতি

fetch('https://restcountries.eu/rest/v1/all')
  .then((response) => {
    return response.json()
  })
  .then((countries) => {
    var options = document.getElementById('someSelect');
    countries.forEach((country) => {
      options.appendChild(new Option(country.name, country.name));
    });
  })


2
$.get(str, function(data){ 
            var sary=data.split('|');
            document.getElementById("select1").options.length = 0;
            document.getElementById("select1").options[0] = new Option('Select a State');
            for(i=0;i<sary.length-1;i++){
                document.getElementById("select1").options[i+1] = new Option(sary[i]);
                document.getElementById("select1").options[i+1].value = sary[i];
            }
            });

1

আমি আসা করি এটা সাহায্য করবে. আমি সাধারণত প্রতিটি কোড লিখার পরিবর্তে ফাংশন ব্যবহার করি।

    $("#action_selector").change(function () {

        ajaxObj = $.ajax({
            url: 'YourURL',
            type: 'POST', // You can use GET
            data: 'parameter1=value1',
            dataType: "json",
            context: this,                
            success: function (data) {
                json: data              
            },
            error: function (request) {
                $(".return-json").html("Some error!");
            }
        });

        json_obj = $.parseJSON(ajaxObj.responseText);            

        var options = $("#selector");
        options.empty();
        options.append(new Option("-- Select --", 0));
        $.each(ajx_obj, function () {
            options.append(new Option(this.text, this.value));
        });
    });
});

1
function generateYears() {
                    $.ajax({
                        type: "GET",
                        url: "getYears.do",
                        data: "",
                        dataType: "json",
                        contentType: "application/json",
                        success: function(msg) {
                            populateYearsToSelectBox(msg);
                        }
                    });
}

function populateYearsToSelectBox(msg) {
  var options = $("#selectYear");
$.each(msg.dataCollecton, function(val, text) {
   options.append(
        $('<option></option>').val(text).html(text)
    );
});
}

1

পরিবর্তনের ক্ষেত্রে আমি এখানে প্রথম উদাহরণটি পেয়েছি দ্বিতীয় নির্বাচিত প্রথম বাছাই করা বাচ্চাদের পেতে

jQuery(document).ready(function($) {
$('.your_select').change(function() {
    $.ajaxSetup({
        headers:{'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')}
    });

    $.ajax({
        type:'POST',
        url: 'Link',
        data:{
          'id': $(this).val()
        },
        success:function(r){
          $.each(r, function(res) {
                console.log(r[res].Nom);
                 $('.select_to_populate').append($("<option />").val(r[res].id).text(r[res].Nom));
            });
        },error:function(r) {
          alert('Error');
        }
    });
});

});enter code here


0

আমি jQuery ব্যবহার করেছি এবং ড্রপ ডাউনগুলিকে জনিত করতে একটি ফাংশন কল করছি।

function loadDropDowns(name,value)
{
   var ddl = "#Categories";
   $(ddl).append('<option value="' + value + '">' + name + "</option>'");
}

0
function LoadCategories() {
    var data = [];
    var url = '@Url.Action("GetCategories", "InternalTables")';
    $.getJSON(url, null, function (data) {
        data = $.map(data, function (item, a) {
            return "<option value=" + item.Value + ">" + item.Description + "</option>";
        });
        $("#ddlCategory").html('<option value="0">Select</option>');
        $("#ddlCategory").append(data.join(""));
    });
}

0

নীচে একটি ড্রপ ডাউন তালিকার জনসংখ্যার উপায় রয়েছে যার আইডি "ফোল্ডারলিস্টড্রপডাউন"

$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        var elem = $("<option></option>");
        elem.attr("value", result[i].ImageFolderID);
        elem.text(result[i].Name);
        elem.appendTo($("select#FolderListDropDown"));
     }
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.