Javascript ile dinamik olarak onay kutularının listesi nasıl oluşturulur

GÜNCELLEME: Kod, Dan'ın yorumları doğrultusunda güncelleştirilmiştir.Javascript ile dinamik olarak onay kutularının listesi nasıl oluşturulur

Üzerinde çalıştığım bir projeyle ilgili bir sorunum var. Yukarıdaki bir açılır menüden neyin seçildiğine bağlı olarak bir onay kutusu listesi oluşturmam gerekiyor. Bunun için javascript kullanmak istiyorum. Yukarıdaki seçime bağlı olarak belirli bir açılır menü oluşturmayı başardım, ancak müşteri bunun yerine onay kutularını istiyor. Bu sefer onay kutularının yapılması dışında aslında aynı şekilde yapılacağını düşündüm, ama işe yaramayacağım. Programlama için genellikle php kullanırım ve javascript'i çok iyi bilmiyorum. İşte açılan açılır menüyü yapmak zorunda olduğum kod… bunun yerine, onay kutularının bir listesini yapmanın en iyi yolu hangisi olurdu? Lütfen bu kodun okunmasını kolay tutmak için büyük ölçüde azaltıldığını unutmayın (sadece önem taşıyan kısımlar).

Kodu:

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

Herhangi bir yardım büyük takdir ve ben Hiç gelişimi ile yardıma ihtiyacım olursa iyilik ödemek için elimden geleni olacaktır.

kaynak

2012-11-11 stereoscience

'seçeneğinin (optionArray öğesinde var seçeneği)' optionArray 'öğesinin yerel özelliklerini içereceğini unutmayın. iyi, istemediğin şey. Bkz. [HasOwnProperty] (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty). http://jsfiddle.net/dandv/9aZQF/ –

Teşekkürler Dan. Kodu girişinizi yansıtacak şekilde güncelledim. Ana problemimi çözmek için ne yapmam gerektiğine dair bir fikrin var mı? – stereoscience

Tam bir örnekle [cevap] (http://stackoverflow.com/a/13330382/1269037) gönderdim :) –

Bir onay kutusu type='checkbox' ile basit bir giriş öğesidir. Yani en az iki şey hazırlamanız gerekiyor: kutunun tanımı ve kutunun kendisi için bir metin düğümü. Bu durumda her iki eklemeyi bir <label> eleman kullanmak da iyidir önce söz:

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

Her çifti için yukarıdaki adımları yapmak zorundayız. Eğer bunu doldurmak önce verilen <div id="some_div"></div> temizlemek zorunda olduğunu unutmayın:

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

kaynak

2012-11-11 10:38:55 Zeta

Buna oy veriyorum ama 15 ünem yok. Ama ben onu cevap olarak işaretledim. Yardım için teşekkürler. Çok iyi çalışıyor. Benzer bir şey denedim ama işe yaramayacaktım. Sanırım ilk olarak benim sözdizim yanlıştı. Her iki durumda da çalışmalısın ve ben teşekkür ederim. Şimdi uyuyabilir ve birkaç saat içinde bitirebilirim. – stereoscience

@stereoscience: Rica ederim. Sadece bir başka açıklama: Diziler için 'for (x in object)' döngüsünü kullanmayın. Bunun yerine 'i için kullanın (i = 0; i Zeta

Bunu hatırlayacağım ve bir şans vereceğim. – stereoscience

dinamik bir onay kutusu oluşturma işlemi gerçekten biraz daha karmaşık bir seçme seçeneği oluştururken aşıyor. Sen oluşturmanız gerekir:

onay kutusunu

<br>

stil için

ve etiket tam keman ile kod özü, var

http://jsfiddle.net/dandv/9aZQF/2/ at:

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"));  
    } 
}

kaynak

2012-11-11 10:39:42

Giriş için teşekkürler. Zaten çalışan Zeta'nın cevabını görmüştüm. Ama daha güzel görünmesini önerdiğin br satırını ekledim. – stereoscience

Javascript ile dinamik olarak onay kutularının listesi nasıl oluşturulur

cevap

İlgili konular