सवाल jQuery: ड्रॉप डाउन पॉप्युलेट करने के लिए सबसे अच्छा अभ्यास?


उदाहरण जो मैंने देखा है, वह हर समय उपरोक्त है, क्योंकि इसमें तारों को संयोजित करना शामिल है, जो कि jQuery नहीं लगता है। यह आमतौर पर इस तरह दिखता है:

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

क्या कोई बेहतर तरीका है?


239
2018-05-02 16:10


मूल




जवाब:


एंड्रियास ग्रीक बहुत करीब था ... यह वास्तव में है this (संदर्भ के लिए नोट करें this लूप में आइटम के बजाय):

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

393
2018-05-04 02:29



प्राचीन इतिहास यहां मुझे पता है, लेकिन मेरे जैसे गुगलरों के लिए जो अभी इस पर ठोकर खाएंगे, अगर आप एक क्लोन करते हैं तो भी तेज़ नहीं होंगे <option/> प्रत्येक को बनाने के बजाय तत्व? - tedders
मुझे ऐसा नहीं लगता ... किसी भी तरह से यह एक नई वस्तु को चालू करने जा रहा है। - quillbreaker
अच्छा! हालांकि मुझे लगता है कि उदाहरण स्पष्ट हो सकता है यदि तत्व को "# ड्रोपडाउन" नाम दिया गया था या इसलिए, क्योंकि यह विकल्पों के वास्तविक मूल तत्व को बेहतर ढंग से प्रतिबिंबित करता है। - Anders
मुझे लगता है कि स्मृति में सभी विकल्पों का निर्माण (स्ट्रिंग वैरिएबल के साथ) पहले और फिर इस स्ट्रिंग को पैरेंट सिलेक्ट कंट्रोल में जोड़ना अधिक कुशल होना चाहिए, क्योंकि इससे केवल एक बार पृष्ठ लेआउट होगा - Wint
क्षमा करें अगर सूचनाएं प्राप्त करें और कुछ भी नहीं देखें। मैंने अपनी पिछली टिप्पणियां हटा दीं। क्योंकि मैंने अपनी टिप्पणियों को पढ़ने के बाद उत्तर को और अधिक समझा :) - ivange


$.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 एक ड्रॉप डाउन तत्व की आईडी है।

पीएस मेरा जावास्क्रिप्ट थोड़ा जंगली है इसलिए वाक्यविन्यास सही नहीं हो सकता है


63
2018-05-02 16:16



यह बहुत करीब है, और मुझे सही दिशा में मिला। नीचे मेरा जवाब देखें। - Jeff Putz
मिठाई! वास्तव में सहायक, मैं लंबे समय से अपने ड्रॉपडाउन को पॉप्युलेट कर रहा हूं, और यह हमेशा पेशेवर नहीं दिखता है - Kyle


ज़रूर - बनाओ 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(''));
});

हाँ। मैं अभी भी पूरे समय तारों के साथ काम कर रहा हूँ। मान लीजिए या नहीं, यह डोम खंड बनाने का सबसे तेज़ तरीका है ... अब, यदि आपके पास केवल कुछ विकल्प हैं, तो यह वास्तव में कोई फर्क नहीं पड़ता - तकनीक का उपयोग करें ड्रेस दर्शाता है अगर आपको शैली पसंद है। लेकिन ध्यान रखें, आप ब्राउज़र के आंतरिक HTML पार्सर का आह्वान कर रहे हैं i*2 बार, बजाय एक बार, और प्रत्येक बार लूप के माध्यम से डोम को संशोधित करना ... विकल्पों की पर्याप्त संख्या के साथ। आप इसके लिए भुगतान करना समाप्त कर देंगे, खासकर पुराने ब्राउज़र पर।

ध्यान दें: जैसा कि न्याय बताता है, अगर यह अलग हो जाएगा ImageFolderID तथा Name नहीं हैं ठीक से एन्कोड किया गया...


36
2018-05-02 16:23



आपको एन्कोड करना चाहिए result[i].ImageFolderID तथा result[i].Name क्रमशः एचटीएमएल-विशेषता-मूल्य और एचटीएमएल-पाठ के रूप में। मुझे लगता है कि वे पूर्व-एन्कोडेड सर्वर से नहीं आते हैं, क्योंकि मुझे लगता है कि सर्वर जेसन लौटाता है, जेसन को बर्बाद नहीं करता है। - yfeldblum
@ जस्टिस: आप सही हैं, लेकिन जेफ के उदाहरण ने इसे छोड़ दिया, इसलिए मैंने भी किया। हालांकि, एक नोट जोड़ देंगे, धन्यवाद। - Shog9♦
मैंने जवाब देने के लिए वोट दिया @ रिसीबाल्ड ने अजीब तरह से दिया इस प्रयोग मैं पार आया, यह पता चला कि concatenation से तेज है join लगभग हर ब्राउज़र में। - weir


या हो सकता है:

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

20
2018-04-19 10:04



var myOptions = {val1: 'text1', val2: 'text2'}; $ .each (myOptions, फ़ंक्शन (वैल, टेक्स्ट) {$ ('# mySelect')। संलग्न करें (नया विकल्प (टेक्स्ट, वैल));}); - The Demz


सबसे तेज़ तरीका यह है:

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

इसके अनुसार यह लिंक सबसे तेज़ तरीका है क्योंकि आप किसी भी प्रकार के डोम सम्मिलन करते समय सब कुछ एक ही तत्व में लपेटते हैं।


15
2017-07-01 08:50



हालांकि प्रतिस्थापन के साथ आप डोम में चयन को प्रतिस्थापित करते हैं, जो पहले से चुने गए ईवेंट को खो देते हैं, मुझे लगता है कि यह विकल्प.html (विकल्प वैल्यू) के साथ बेहतर होगा यदि आप ईवेंट को संरक्षित करना चाहते हैं - Geomorillo


मैंने यह jquery साइट से काम करने के लिए पाया

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

9
2018-03-16 09:00





मैंने उपयोग किया selectboxes jquery प्लगइन। यह आपका उदाहरण बदल देता है:

$('#idofselect').ajaxAddOption('/Admin/GetFolderList/', {}, false);

2
2018-05-02 16:17





$.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];
            }
            });

2
2018-03-15 17:47





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
2018-05-06 00:16





मैंने इसे पढ़ा है दस्तावेज़ खंड निष्पादक है क्योंकि यह डीओएम तत्व के प्रत्येक सम्मिलन पर पेज रीफ्लो से बचाता है, यह सभी ब्राउज़रों (यहां तक ​​कि आईई 6) द्वारा भी समर्थित है।

var fragment = document.createDocumentFragment();

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

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

मैंने पहले इस बारे में पढ़ा कोडस्कूल की जावास्क्रिप्ट बेस्ट प्रैक्टिस कोर्स

यहाँ एक है विभिन्न दृष्टिकोणों की तुलनाधन्यवाद, लेखक के पास जाओ।


1
2018-03-04 09:32





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
2017-08-28 04:50