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

Question

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

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

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

Answer 1

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

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

Comments

प्राचीन इतिहास यहाँ मुझे पता है, लेकिन मेरे जैसे गुगलों के लिए, जो अभी इस पर लड़खड़ाए हुए हैं, अगर आप <option/>हर एक को बनाने के बजाय एक तत्व का क्लोन बनाते हैं तो यह और भी तेज़ नहीं होगा ?

— टेडर्स

मुझे ऐसा नहीं लगता ... किसी भी तरह से यह एक नई वस्तु को तत्काल करने जा रहा है।

— क्विलब्रेकर

अच्छा! हालांकि मुझे लगता है कि उदाहरण स्पष्ट हो सकता है यदि तत्व को "#dropdown" या तो नाम दिया गया था, क्योंकि यह विकल्पों के वास्तविक मूल तत्व को बेहतर ढंग से दर्शाता है।

— एंडर्स

मुझे लगता है कि स्मृति में सभी विकल्पों का निर्माण (एक स्ट्रिंग चर के साथ) पहले और फिर इस स्ट्रिंग को माता-पिता के चयन पर नियंत्रण के लिए और अधिक कुशल होना चाहिए, क्योंकि इससे पृष्ठ लेआउट केवल एक बार हो जाएगा

— Wint

क्षमा करें यदि सूचनाएं प्राप्त करें और कुछ भी न देखें। मैंने अपनी पिछली टिप्पणियों को हटा दिया। क्योंकि मैंने अपनी टिप्पणियों को पढ़ने के बाद उत्तर को और अधिक समझा :)

— ivange

Answer 2

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

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

Comments

यह बहुत करीब है, और मुझे सही दिशा में मिला है। नीचे मेरा जवाब देखें।

— जेफ पुटज़

मिठाई! वास्तव में मददगार, मैं लंबे समय से अपने ड्रॉपडाउन को आबाद कर रहा था, और यह हमेशा पेशेवर नहीं दिखता था

— काइल

Answer 3

सुनिश्चित करें - लूप के माध्यम से हर बार के बजाय 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(''));
});

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

नोट: के रूप में न्यायमूर्ति बताते हैं, यह अलग करता है, तो गिर जाएगी ImageFolderIDऔर Nameनहीं कर रहे हैं उचित रूप से इनकोडिंग ...

Comments

आपको सांकेतिक शब्दों में बदलना चाहिए result[i].ImageFolderID और result[i].Nameक्रमश: एचटीएमएल-विशेषता-मूल्य और html-पाठ के रूप में। मैं यह नहीं मानूंगा कि वे सर्वर से पूर्व-एन्कोडेड हैं, क्योंकि मैं यह मानूंगा कि सर्वर ने जसन को लौटाया है, न कि कमीने जौन को।

— येलफेल्डम

@ जस्टिस: आप सही कह रहे हैं, लेकिन जब से जेफ के उदाहरण ने इसे छोड़ दिया, मैंने भी किया। एक नोट जोड़ देगा हालांकि, धन्यवाद।

— शोग

मैंने उत्तर के लिए मतदान किया @Ribibald ने विचित्र रूप से दिया, क्योंकि इस परीक्षण के आधार पर मैं भर में आया था, यह पता चला है joinकि वस्तुतः हर ब्राउज़र की तुलना में तेजी है।

— वीर

Answer 4

या हो सकता है:

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

Comments

var myOptions = {val1: 'text1', val2: 'text2'}; $ .each (myOptions, function (val, text) {$ ('# mySelect')। परिशिष्ट (नया विकल्प (text, val));});

— डेमज़ जूल

Answer 5

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

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

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

Comments

हालाँकि, रिप्लेसमेंट के साथ, आप सेलेक्ट को डोम में बदल देते हैं, पहले से ही जुड़ी हुई घटनाओं को खो देते हैं, मुझे लगता है कि यह options.html (optionsValue) के साथ बेहतर होगा यदि आप घटनाओं को संरक्षित करना चाहते हैं

— Geomorillo

Answer 6

मुझे यह jquery साइट से काम करने के लिए मिला

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

Answer 7

मैंने पढ़ा है कि दस्तावेज़ के टुकड़े का उपयोग करना अच्छा है क्योंकि यह DOM तत्व के प्रत्येक प्रविष्टि पर पेज रिफ्लेक्स से बचा जाता है, यह सभी ब्राउज़रों (यहां तक ​​कि IE 6) द्वारा भी अच्छी तरह से समर्थित है।

var fragment = document.createDocumentFragment();

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

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

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

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

Comments

यह निश्चित रूप से तेज़ तरीका है। इससे भी बेहतर - इस सबके साथ jQuery को छोड़ दें:result.forEach(function(el){var option=document.createElement('option').option.textContent=el.name;option.value=el.ImageFolderID);fragment.appendChild(el);

— dgo

Answer 8

ईएस 6 के साथ अन्य दृष्टिकोण

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

Answer 9

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

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

Answer 10

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

Answer 11

मुझे उम्मीद है यह मदद करेगा। मैं आमतौर पर सभी कोड लिखने के बजाय फ़ंक्शन का उपयोग करता हूं।

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

Answer 12

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

Answer 13

यहाँ एक उदाहरण है जो मैंने परिवर्तन पर किया था मुझे पहली पसंद के बच्चे दूसरे चयन में मिले

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

Answer 14

मैं jQuery का उपयोग कर रहा हूं और ड्रॉप डाउन को पॉप्युलेट करने के लिए एक फ़ंक्शन को कॉल कर रहा हूं।

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

Answer 15

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

Answer 16

नीचे एक ड्रॉप डाउन सूची को पॉप्युलेट करने का Jquery तरीका है जिसका आईडी "FolderListDropDown" है

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