So erstellen Sie eine Liste von Kontrollkästchen dynamisch mit Javascript

UPDATE: Code wurde aktualisiert nach Dan Kommentare.So erstellen Sie eine Liste von Kontrollkästchen dynamisch mit Javascript

Ich habe ein Problem mit einem Projekt, an dem ich arbeite. Ich muss eine Liste von Kontrollkästchen erstellen, abhängig davon, was in einem Dropdown-Menü oben ausgewählt wurde. Ich möchte Javascript dafür verwenden. Ich war in der Lage, eine Auswahl-Dropdown-Liste abhängig von der Auswahl oben zu erstellen, aber der Client möchte stattdessen Kontrollkästchen. Ich dachte, es würde im Wesentlichen genauso gemacht werden, außer diesmal Checkboxen zu machen, aber ich kann es nicht zur Arbeit bringen. Normalerweise benutze ich PHP für meine Programmierung und kenne daher JavaScript nicht so gut. Hier ist der Code, den ich zum Auswahl-Dropdown machen muss ... was wäre der beste Weg, um es stattdessen zu einer Liste von Checkboxen zu machen? Bitte beachten Sie, dass dieser Code stark reduziert wurde, um das Lesen zu erleichtern (nur die wichtigen Teile sind hier).

Code:

<!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>

Jede Hilfe wäre sehr dankbar, und ich würde mein Bestes versuchen, die Gunst zurückzahlen, wenn Sie jemals Hilfe bei jeder Entwicklung benötigt.

Quelle

2012-11-11 stereoscience

Beachten Sie, dass 'for (var option in optionArray)' die nativen Eigenschaften von 'optionArray' als enthält naja, das willst du nicht. Siehe [hasOwnProperty] (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty). http://jsfiddle.net/dandv/9aZQF/ –

Danke Dan. Ich habe den Code aktualisiert, um Ihre Eingabe zu reflektieren. Irgendeine Idee, wie ich das mache, was ich tun muss, um mein Hauptproblem zu lösen? – stereoscience

Ich habe gerade [die Antwort] (http://stackoverflow.com/a/13330382/1269037), mit einem vollen funktionierenden Beispiel gepostet :) –

Ein Kontrollkästchen ist ein einfaches Eingabeelement mit type='checkbox'. Sie müssen also mindestens zwei Dinge vorbereiten: einen Textknoten für die Beschreibung der Box und die Box selbst. In diesem Fall ist es gut, auch ein <label> Element zu verwenden, um beiden Dinge schließen erwähnt vor:

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

Sie haben die oben genannten Schritte für jedes Paar zu tun. Beachten Sie, dass die angegebenen <div id="some_div"></div> zu löschen, bevor Sie es zu füllen:

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

Quelle

2012-11-11 10:38:55 Zeta

Ich würde dies stimmen, aber ich habe 15 Ruf nicht. Aber ich habe es als die Antwort markiert. Danke für die Hilfe. Es funktioniert sehr gut. Ich hatte etwas ähnliches versucht, konnte es aber nicht zur Arbeit bringen. Ich denke, meine Syntax war zuerst falsch. Wie auch immer, du musst arbeiten, und ich danke dir. Jetzt kann ich schlafen und in ein paar Stunden fertig werden. – stereoscience

@Stereoscience: Gern geschehen. Nur noch eine Bemerkung: Verwenden Sie keine 'for (x in object)' - Schleife für Arrays. Verwenden Sie stattdessen 'for (i = 0; i Zeta

Ich werde mich daran erinnern und es versuchen. – stereoscience

Der Prozess eine Checkbox dynamisch zu schaffen, ist in der Tat ein wenig komplizierter als eine ausgewählte Option zu schaffen. Sie müssen erstellen:

die Checkbox
sein Label
und möglicherweise ein <br> für

Hier ist der Kern des Codes, mit der vollen Geige bei 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"));  
    } 
}

Quelle

2012-11-11 10:39:42

Danke für die Eingabe. Ich hatte Zetas Antwort bereits gesehen, die funktionierte. Aber ich habe die Zeile hinzugefügt, die Sie vorgeschlagen haben, um es schöner aussehen zu lassen. – stereoscience

So erstellen Sie eine Liste von Kontrollkästchen dynamisch mit Javascript

Antwort

Verwandte Themen