Come creare un elenco di checkbox in modo dinamico con javascript

AGGIORNAMENTO: il codice è stato aggiornato in base ai commenti di Dan.Come creare un elenco di checkbox in modo dinamico con javascript

Ho un problema con un progetto su cui sto lavorando. Devo creare un elenco di checkbox a seconda di cosa è selezionato in un menu a discesa di selezione sopra. Mi piacerebbe usare javascript per questo. Sono stato in grado di creare un menu a discesa di selezione in base alla selezione di cui sopra, ma il client vuole invece le caselle di controllo. Ho pensato che sarebbe stato fatto essenzialmente allo stesso modo, tranne che per le caselle di controllo questa volta, ma non riesco a farlo funzionare. Di solito uso php per la mia programmazione e quindi non conosco troppo bene javascript. Ecco il codice che devo fare per selezionare il menu a discesa .... quale sarebbe il modo migliore per renderlo invece un elenco di checkbox? Si noti che questo codice è stato notevolmente ridotto per semplificare la lettura (solo le parti che contano sono qui).

Codice:

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

Qualsiasi aiuto sarebbe molto apprezzato e vorrei fare del mio meglio per ripagare il favore se mai bisogno di aiuto con qualsiasi sviluppo.

fonte

2012-11-11 stereoscience

Si noti che 'for (opzione var in optionArray)' includerà le proprietà native di 'optionArray' come bene, che non vuoi Vedi [hasOwnProperty] (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty). http://jsfiddle.net/dandv/9aZQF/ –

Grazie Dan. Ho aggiornato il codice per riflettere il tuo input. Qualche idea su come fare ciò che devo fare per risolvere il mio problema principale? – stereoscience

Ho appena postato [la risposta] (http://stackoverflow.com/a/13330382/1269037), con un esempio operativo completo :) –

Una casella di controllo è un semplice elemento di input con type='checkbox'. Quindi devi preparare almeno due cose: un nodo di testo per la descrizione della scatola e della scatola stessa. In questo caso è anche un bene di utilizzare un elemento <label> per includere entrambe le cose parlare prima:

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

quello che dovete fare i passi precedenti per ogni coppia. Si noti che è necessario cancellare la data <div id="some_div"></div> prima di popolare è:

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

fonte

2012-11-11 10:38:55 Zeta

Vorrei votare questo, ma non ho 15 reputazione. Ma l'ho contrassegnato come la risposta. Grazie per l'aiuto. Funziona molto bene. Avevo provato qualcosa di simile ma non riuscivo a farlo funzionare. Immagino che la mia sintassi all'inizio fosse sbagliata. Ad ogni modo, devi lavorare, e ti ringrazio. Ora posso dormire e finire tra poche ore. – stereoscience

@stereoscience: prego. Solo un'ulteriore osservazione: non usare un ciclo 'for (x in object)' per gli array. Usa invece 'for (i = 0; i Zeta

Lo ricorderò e gli darò uno sparo. – stereoscience

Il processo di creazione di una casella di controllo in modo dinamico è davvero un po 'più coinvolto rispetto alla creazione di un selezionare l'opzione. È necessario creare:

la casella di controllo
sua etichetta
ed eventualmente un <br> per lo styling

Ecco l'essenza del codice, con la piena violino presso 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"));  
    } 
}

fonte

2012-11-11 10:39:42

Grazie per l'input. Avevo già visto la risposta di Zeta che funzionava. Ma ho aggiunto la linea che hai suggerito per renderla più bella. – stereoscience

Come creare un elenco di checkbox in modo dinamico con javascript

risposta

Problemi correlati