जावास्क्रिप्ट के साथ चयन करने के लिए विकल्प जोड़ना

Question

मैं चाहता हूं कि यह जावास्क्रिप्ट आइडी = "मेनसेलेक्ट" के साथ एक चयन में 12 से 100 तक विकल्प बनाएं, क्योंकि मैं मैन्युअल रूप से सभी विकल्प टैग नहीं बनाना चाहता हूं। क्या आप मुझे कुछ संकेत दे सकते हैं? धन्यवाद

function selectOptionCreate() {

  var age = 88;
  line = "";
  for (var i = 0; i < 90; i++) {
    line += "<option>";
    line += age + i;
    line += "</option>";
  }

  return line;
}

Comments

देखें stackoverflow.com/questions/170986/…

— smnbss

लिंक को फिर से खोलने के लिए वोटिंग, क्योंकि लिंक किए गए 'डुप्लिकेट' में केवल jQuery- आधारित उत्तर होते हैं, जबकि इसके लिए सादे जावास्क्रिप्ट की आवश्यकता होती है (या कम से कम) की आवश्यकता होती है।

— डेविड का कहना है कि

यहाँ शानदार जवाब :mySelect.options[mySelect.options.length] = new Option('Text 1', 'Value1');

— रफिन

Answer 1

आप इसे एक सरल forलूप के साथ प्राप्त कर सकते हैं :

var min = 12,
    max = 100,
    select = document.getElementById('selectElementId');

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

जेएस फिडेल डेमो ।

JS , दोनों मेरे और Sime Vidas के उत्तर की पूर्ण तुलना करते हैं , क्योंकि मुझे लगा कि उनका विचार मेरी तुलना में थोड़ा अधिक समझने योग्य / सहज है और मैंने सोचा कि यह कैसे कार्यान्वयन में परिवर्तित होगा। क्रोमियम 14 / उबंटू 11.04 के अनुसार मेरा कुछ और तेज है, अन्य ब्राउज़रों / प्लेटफार्मों में हालांकि अलग-अलग परिणाम होने की संभावना है।

---

ओपी की टिप्पणी के जवाब में संपादित :

[कैसे] [I] इसे एक से अधिक तत्वों पर लागू करते हैं?

function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0,
            max = max || min + 100;

        select = document.getElementById(target);

        for (var i = min; i<=max; i++){
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    }
}
// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

जेएस फिडेल डेमो ।

और, आखिरकार (काफी देरी के बाद ...), एक विधि के रूप HTMLSelectElementमें populate()फंक्शन को चेन करने के लिए प्रोटोटाइप का विस्तार करने वाला एक तरीका, DOM नोड के लिए:

HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.max = settings.min + 100;

    for (var userOpt in opts) {
        if (opts.hasOwnProperty(userOpt)) {
            settings[userOpt] = opts[userOpt];
        }
    }

    for (var i = settings.min; i <= settings.max; i++) {
        this.appendChild(new Option(i, i));
    }
};

document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});

जेएस फिडेल डेमो ।

संदर्भ:

• node.appendChild()।
• document.getElementById()।
• element.innerHTML।

Comments

@Jack: सहमत हुए, और मैं का उपयोग किया है कि बाद के संपादन में :) दृष्टिकोण

— डेविड कहते ही पुन: स्थापित मोनिका

साथ ही, मेजबान प्रोटोटाइप (लुभाने के दौरान) का विस्तार करना एक बुरा विचार माना जाता है ।

— रॉबग

मुझे लगता है कि क्रॉस-साइट स्क्रिप्टिंग कमजोरियों से बचने के लिए इसका उपयोग innerTextकरने के innerHTMLलिए अद्यतन किया जाना चाहिए । आपको क्या लगता है @DavidThomas?

— अभि बेकर्ट

Answer 2

हेयर यू गो:

for ( i = 12; i <= 100; i += 1 ) {
    option = document.createElement( 'option' );
    option.value = option.text = i;
    select.add( option );
}

लाइव डेमो: http://jsfiddle.net/mwPb5/

---

अपडेट: चूंकि आप इस कोड का पुन: उपयोग करना चाहते हैं, इसलिए इसके लिए यहां फ़ंक्शन है:

function initDropdownList( id, min, max ) {
    var select, i, option;

    select = document.getElementById( id );
    for ( i = min; i <= max; i += 1 ) {
        option = document.createElement( 'option' );
        option.value = option.text = i;
        select.add( option );
    }
}

उपयोग:

initDropdownList( 'mainSelect', 12, 100 );

लाइव डेमो: http://jsfiddle.net/mwPb5/1/

Comments

मैं इसे एक से अधिक तत्वों पर कैसे लागू करूं?

— जैकेटपर

Answer 3

सबसे संक्षिप्त और सहज तरीका होगा:

var selectElement = document.getElementById('ageselect');

for (var age = 12; age <= 100; age++) {
  selectElement.add(new Option(age));
}

Your age: <select id="ageselect"><option value="">Please select</option></select>

आप उपयोग किए गए कार्यों के अतिरिक्त मापदंडों के साथ सूची के प्रारंभ में नाम और मूल्य को अलग कर सकते हैं या जोड़ सकते हैं:
HTML तत्व (। [पहले, आइटम]);
नया विकल्प (पाठ, मूल्य, डिफ़ॉल्ट चयनित, चयनित);

Answer 4

मैं एक पाश के अंदर DOM जोड़तोड़ करने की सलाह नहीं देता - जो बड़े डेटासेट में महंगा हो सकता है। इसके बजाय, मैं ऐसा कुछ करूंगा:

var elMainSelect = document.getElementById('mainSelect');

function selectOptionsCreate() {
  var frag = document.createDocumentFragment(),
    elOption;
  for (var i=12; i<101; ++i) {
    elOption = frag.appendChild(document.createElement('option'));
    elOption.text = i;
  }
  elMainSelect.appendChild(frag);
}

आप MDN पर DocumentFragment के बारे में अधिक पढ़ सकते हैं , लेकिन यहाँ इसका सार है:

यह एक मानक संरचना की तरह नोड्स से बने दस्तावेज़ संरचना के एक खंड को संग्रहीत करने के लिए दस्तावेज़ के हल्के-वजन संस्करण के रूप में उपयोग किया जाता है। मुख्य अंतर यह है कि क्योंकि दस्तावेज़ का टुकड़ा वास्तविक DOM की संरचना का हिस्सा नहीं है, टुकड़े में किए गए परिवर्तन दस्तावेज़ को प्रभावित नहीं करते हैं, reflow का कारण बनते हैं, या कोई भी प्रदर्शन प्रभाव उत्पन्न कर सकते हैं जो परिवर्तन किए जाने पर उत्पन्न हो सकते हैं।

Answer 5

पृष्ठ से बार-बार रेंडर करने से बचने के लिए एक चीज़ जो मैं टालता हूँ वह है लूप में DOM ऑपरेशंस करना।

var firstSelect = document.getElementById('first select elements id'),
    secondSelect = document.getElementById('second select elements id'),
    optionsHTML = [],
    i = 12;

for (; i < 100; i += 1) {
  optionsHTML.push("<option value=\"Age" + i + "\">Age" + i + "</option>";
}

firstSelect.innerHTML = optionsHTML.join('\n');
secondSelect.innerHTML = optionsHTML.join('\n');

संपादित करें: फ़ंक्शन को यह दिखाने के लिए हटा दिया कि आप केवल उसी HTML को कैसे असाइन कर सकते हैं जिसे आपने किसी अन्य चयनित तत्व तक बनाया है - इस प्रकार फ़ंक्शन कॉल को दोहराकर अनावश्यक लूपिंग से बचें।

Comments

मैं इसे एक से अधिक तत्वों पर कैसे लागू करूं?

— कटहल

निश्चित नहीं कि मैं अनुसरण करता हूं - आप एक से अधिक तत्वों को एक ही विकल्प जोड़ना चाहते हैं?

— किनाकुटा

हाँ, मैं एक ही विकल्प के साथ बॉक्स करना चाहता हूं

— jacktheripper

मैंने इसे एक ऐसे फ़ंक्शन में शामिल किया है जिसमें आप कॉल कर सकते हैं कि आप केवल उन चुनिंदा तत्व की आईडी से गुजरते हैं जिन्हें आप विकल्पों को जोड़ना चाहते हैं।

— किनाकुटा

यही दस्तावेज है। आप स्वीकार किए गए उत्तर को आसानी से संशोधित कर सकते हैं, ताकि कई रेंडरिंग को रोकने के लिए पहले दस्तावेज़ में दस्तावेज़ों को जोड़ा जा सके।

— सैम ब्रास्लेव्स्की

Answer 6

देखें: jQuery के साथ सरणी से चयन करने के लिए विकल्पों को जोड़ने का सबसे अच्छा तरीका क्या है?

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

Answer 7

जब आप एक नई Optionवस्तु बनाते हैं, तो पास करने के लिए दो पैरामीटर होते हैं: पहला वह पाठ है जिसे आप सूची में दिखाना चाहते हैं, और दूसरा वह विकल्प जिसे विकल्प सौंपा जाना है।

var myNewOption = new Option("TheText", "TheValue");

आप तब इस Optionऑब्जेक्ट को एक खाली सरणी तत्व के लिए असाइन करते हैं , उदाहरण के लिए:

document.theForm.theSelectObject.options[0] = myNewOption;

Answer 8

उपरोक्त किसी भी समाधान ने मेरे लिए काम नहीं किया। जब मैंने कोशिश की तो अपेंड विधि में त्रुटि नहीं हुई लेकिन इससे मेरी समस्या हल नहीं हुई। अंत में मैंने select2 के डेटा प्रॉपर्टी के साथ अपनी समस्या हल की। मैंने json का उपयोग किया और सरणी प्राप्त की और फिर इसे select2 एलिमेंट इनिशियलाइज़ में दिया। अधिक विवरण के लिए आप नीचे दिए गए पोस्ट पर मेरा उत्तर देख सकते हैं।

https://stackoverflow.com/a/41297283/4928277

Answer 9

अक्सर आपके पास संबंधित अभिलेखों की एक सरणी होती है, मुझे selectइस तरह से भरने के लिए यह आसान और काफी घोषणात्मक लगता है :

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

यह मौजूदा विकल्पों की जगह लेगा।
आप selectEl.insertAdjacentHTML('afterbegin', str);उन्हें शीर्ष पर जोड़ने के बजाय उपयोग कर सकते हैं ।
तथाselectEl.insertAdjacentHTML('beforeend', str); उन्हें सूची के निचले भाग में जोड़ने के लिए।

IE11 संगत वाक्यविन्यास:

array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');