जावास्क्रिप्ट

अद्यतन के साथ गतिशील रूप से चेकबॉक्स की सूची कैसे बनाएं अद्यतन: कोड प्रति दान की टिप्पणियों को अपडेट किया गया है।जावास्क्रिप्ट

मुझे एक परियोजना के साथ समस्या है जिस पर मैं काम कर रहा हूं। ऊपर दिए गए ड्रॉपडाउन में क्या चुना गया है, इस पर निर्भर करता है कि मुझे चेकबॉक्स की एक सूची बनाने की आवश्यकता है। मैं इसके लिए जावास्क्रिप्ट का उपयोग करना चाहता हूं। मैं उपर्युक्त चयन पर निर्भर एक चुनिंदा ड्रॉपडाउन बनाने में सक्षम था लेकिन ग्राहक इसके बजाय चेकबॉक्स चाहता है। मुझे लगा कि यह अनिवार्य रूप से उसी तरह किया जाएगा, इस बार चेकबॉक्स को छोड़कर, लेकिन मैं इसे काम नहीं कर सकता। मैं आमतौर पर अपने प्रोग्रामिंग के लिए PHP का उपयोग करता हूं और इसलिए जावास्क्रिप्ट को बहुत अच्छी तरह से नहीं जानता। यहां कोड है जिसे मुझे चुनिंदा ड्रॉपडाउन बनाना है .... इसके बजाय चेकबॉक्स की सूची बनाने का सबसे अच्छा तरीका क्या होगा? कृपया ध्यान दें कि यह कोड पढ़ने में आसान रखने के लिए बहुत कम कर दिया गया है (केवल वे भाग जो यहां हैं)।

कोड:

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
    function populate(slct1,slct2){ 
var s1 = document.getElementById(slct1); 
var s2 = document.getElementById(slct2); 
s2.innerHTML = ""; 
if(s1.value == "Cat1"){ 
    var optionArray = ["Subcat1","Subcat1.1","Subcat1.2"]; 
} else if(s1.value == "Cat2"){ 
    var optionArray = ["Subcat2","Subcat2.1","Subcat2.2"]; 
} else if(s1.value == "Cat3"){ 
    var optionArray = ["Subcat3","Subcat3.1","Subcat3.3"]; 
} 
for(var option in optionArray){ 
    if (optionArray.hasOwnProperty(option)) { 
     var pair = optionArray[option]; 
     var newOption = document.createElement("option"); 
     newOption.value = pair; 
     newOption.innerHTML = pair; 
     s2.options.add(newOption); 
    } 
} 
} 
</script> 
</head> 
<body> 
<h2>Dynamic Select Dropdown</h2> 
<hr /> 
Choose a Category: 
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Cat1">Cat1</option> 
    <option value="Cat2">Cat2</option> 
    <option value="Cat3">Cat3</option> 
</select> 
<hr /> 
    Choose Subcategory: 
<select id="slct2" name="slct2"></select> 
<hr /> 
</body> 
</html>

किसी भी मदद की बहुत सराहना की जाएगी और मैं एहसान चुकाने के लिए अगर आप कभी भी किसी भी विकास के साथ मदद की जरूरत पूरी कोशिश करेंगे।

स्रोत

2012-11-11 stereoscience

ध्यान दें कि 'विकल्प (विकल्प में var विकल्प) के लिए' विकल्पअरे 'के मूल गुण शामिल होंगे अच्छा, जो आप नहीं चाहते हैं। [HasOwnProperty] देखें (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)। http://jsfiddle.net/dandv/9aZQF/ –

धन्यवाद दान। मैंने आपके इनपुट को प्रतिबिंबित करने के लिए कोड अपडेट किया। मेरी मुख्य समस्या को हल करने के लिए मुझे क्या करना है, इस पर कोई विचार है? – stereoscience

मैंने अभी पोस्ट किया है [उत्तर] (http://stackoverflow.com/a/13330382/1269037), एक पूर्ण कार्य उदाहरण के साथ :) –

एक चेकबॉक्स type='checkbox' के साथ एक साधारण इनपुट तत्व है। तो आपको कम से कम दो चीजें तैयार करनी होंगी: बॉक्स के विवरण और बॉक्स के विवरण के लिए एक टेक्स्ट नोड। इस मामले में यह भी एक <label> तत्व का उपयोग करने के लिए दोनों बातें शामिल करने के लिए अच्छा है पहले उल्लेख:

// create the necessary elements 
var label= document.createElement("label"); 
var description = document.createTextNode(pair); 
var checkbox = document.createElement("input"); 

checkbox.type = "checkbox"; // make the element a checkbox 
checkbox.name = "slct[]";  // give it a name we can check on the server side 
checkbox.value = pair;   // make its value "pair" 

label.appendChild(checkbox); // add the box to the element 
label.appendChild(description);// add the description to the element 

// add the label element to your div 
document.getElementById('some_div').appendChild(label);

आप हर जोड़ी के लिए ऊपर दिए गए चरणों क्या करना है। ध्यान दें कि आप दिया <div id="some_div"></div> स्पष्ट करने के लिए इससे पहले कि आप को पॉप्युलेट है:

// clear the former content of a given <div id="some_div"></div> 
document.getElementById('some_div').innerHTML = '';

स्रोत

2012-11-11 10:38:55 Zeta

मैं इसे वोट दूंगा, लेकिन मेरे पास 15 प्रतिष्ठा नहीं है। लेकिन मैंने इसे जवाब के रूप में चिह्नित किया। सहायता के लिए धनयवाद। ये अच्छी तरह काम करता है। मैंने कुछ ऐसा करने की कोशिश की थी लेकिन इसे काम नहीं कर सका। मुझे लगता है कि मेरा वाक्यविन्यास पहले गलत था। किसी भी तरह से, आपको काम करना है, और मैं आपको धन्यवाद देता हूं। अब मैं कुछ घंटों में सो सकता हूं और खत्म कर सकता हूं। – stereoscience

@stereoscience: आपका स्वागत है। बस एक और टिप्पणी: सरणी के लिए '(ऑब्जेक्ट में एक्स)' लूप का उपयोग न करें। इसके बजाय 'i (i = 0; i Zeta

मुझे याद होगा और इसे एक शॉट दें। इनपुट के लिए – stereoscience

गतिशील रूप से एक चेकबॉक्स बनाने की प्रक्रिया वास्तव में एक छोटे से अधिक एक विकल्प का चयन करें बनाने की तुलना में शामिल है। आप बनाने की जरूरत:

चेकबॉक्स
अपने लेबल
और संभवतः एक <br>

यहाँ स्टाइलिंग के लिए कोड का सार, पूर्ण बेला के साथ है http://jsfiddle.net/dandv/9aZQF/2/ पर:

for (var option in optionArray) { 
    if (optionArray.hasOwnProperty(option)) { 
     var pair = optionArray[option]; 
     var checkbox = document.createElement("input"); 
     checkbox.type = "checkbox"; 
     checkbox.name = pair; 
     checkbox.value = pair; 
     s2.appendChild(checkbox); 

     var label = document.createElement('label') 
     label.htmlFor = pair; 
     label.appendChild(document.createTextNode(pair)); 

     s2.appendChild(label); 
     s2.appendChild(document.createElement("br"));  
    } 
}

स्रोत

2012-11-11 10:39:42

धन्यवाद। मैंने पहले ही जेता के जवाब को देखा था जो काम करता था। लेकिन मैंने लाइन बी को जोड़ा जो आपने इसे अच्छे दिखने के लिए सुझाव दिया था। – stereoscience

उत्तर

संबंधित मुद्दे