दिलचस्प पोस्ट
बंदर पैचिंग क्या है? स्ट्रिंग से एक क्लास का एक उदाहरण बनाएं डाटा ट्रांसफर ऑब्जेक्ट क्या है? SQL सर्वर में DateTime2 बनाम डेटटाइम "आंतरिक एचटीएमएल + = …" बनाम "ऐपेंड चाल्ड (टीटीटीएनोड)" MATLAB में ट्रांसस्ट्रोज़ बनाम सीटीएन्सज का उपयोग करना Linq में बैच बनाएं क्या मैं एक HTML <canvas> तत्व पर एंटीअलियाज़िंग को बंद कर सकता / सकती हूं? आज की तारीख के साथ मैं कैसे एक jQuery Datepicker पाठ बॉक्स पूर्व-पॉप्यूलेट? MySQL पूर्णांक फ़ील्ड को PHP में स्ट्रिंग के रूप में लौटाया गया है UIAlertController प्रस्तुत करने के लिए कैसे करें जब दृश्य नियंत्रक में नहीं? बंडलर: क्या होता है: की आवश्यकता => एक जेफफ़ाइल में गलत है? आईफ़ोन चिकनी स्केच ड्राइंग एल्गोरिथ्म डेटाबेस का डिफ़ॉल्ट मिलान कैसे बदला जाए? कैसे एक पूरी जार फ़ाइल decompile करने के लिए?

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

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

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

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

आप इसे पाश के for सरल 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); } 

जेएस फ्रेडल डेमो

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


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

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

 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

हेयर यू गो:

 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/

एक बात जो मैं बचना चाहूंगा वह पृष्ठ की दोहराई गई दोहरावों से बचने के लिए एक लूप में 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 को कैसे निर्दिष्ट कर सकते हैं – इस प्रकार फ़ंक्शन कॉल को दोहराकर अनावश्यक पाशन से परहेज करें।

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

 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 के बारे में अधिक पढ़ सकते हैं, लेकिन यहां इसका सारांश है:

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

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

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

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

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

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

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

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

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

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