Cách tạo danh sách hộp kiểm động với javascript

CẬP NHẬT: Mã đã được cập nhật theo nhận xét của Dan.Cách tạo danh sách hộp kiểm động với javascript

Tôi gặp sự cố với dự án tôi đang làm việc. Tôi cần tạo danh sách các hộp kiểm tùy thuộc vào những gì được chọn trong danh sách thả xuống chọn ở trên. Tôi muốn sử dụng javascript cho việc này. Tôi đã có thể tạo một trình đơn thả xuống chọn tùy thuộc vào lựa chọn ở trên nhưng khách hàng muốn các hộp kiểm để thay thế. Tôi nhận ra rằng về cơ bản nó sẽ được thực hiện theo cùng một cách, ngoại trừ việc làm hộp kiểm lần này, nhưng tôi không thể làm cho nó hoạt động được. Tôi thường sử dụng php cho lập trình của tôi và do đó không biết javascript quá tốt. Đây là đoạn code tôi phải làm cho các lựa chọn thả xuống .... những gì sẽ là cách tốt nhất để làm cho nó một danh sách các hộp kiểm để thay thế? Xin lưu ý rằng mã này đã được giảm đáng kể để giữ cho nó dễ đọc (chỉ các phần quan trọng là ở đây).

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>

Bất kỳ trợ giúp sẽ được đánh giá rất cao và tôi sẽ cố gắng hết sức mình để trả ơn nếu bạn đã bao giờ cần sự giúp đỡ với bất kỳ phát triển.

Nguồn

2012-11-11 stereoscience

Lưu ý rằng 'for (var option in optionArray)' sẽ bao gồm các thuộc tính gốc của 'optionArray' là tốt, mà bạn không muốn. Xem [hasOwnProperty] (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty). http://jsfiddle.net/dandv/9aZQF/ –

Cảm ơn Dan. Tôi đã cập nhật mã để phản ánh ý kiến của bạn. Bất kỳ ý tưởng về cách làm những gì tôi cần làm để giải quyết vấn đề chính của tôi? – stereoscience

Tôi vừa mới đăng [câu trả lời] (http://stackoverflow.com/a/13330382/1269037), với một ví dụ làm việc đầy đủ :) –

Hộp kiểm là một yếu tố đầu vào đơn giản với type='checkbox'. Vì vậy, bạn phải chuẩn bị ít nhất hai thứ: một nút văn bản cho mô tả của hộp và chính hộp đó. Trong trường hợp này, bạn cũng nên sử dụng yếu tố <label> để bao gồm cả hai thứ được đề cập trước:

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

Bạn phải thực hiện các bước trên cho mỗi cặp. Lưu ý rằng bạn phải xóa cho <div id="some_div"></div> trước khi bạn cư nó:

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

Nguồn

2012-11-11 10:38:55 Zeta

Tôi sẽ bỏ phiếu này, nhưng tôi không có 15 danh tiếng. Nhưng tôi đã đánh dấu nó là câu trả lời. Cảm ơn bạn vì sự giúp đỡ. Nó hoạt động rất tốt. Tôi đã thử một cái gì đó tương tự nhưng không thể làm cho nó hoạt động được. Tôi đoán cú pháp của tôi đã sai lúc đầu. Dù bằng cách nào, bạn phải làm việc, và tôi cảm ơn bạn. Bây giờ tôi có thể ngủ và kết thúc sau vài giờ. – stereoscience

@stereoscience: Bạn được chào đón. Chỉ cần lưu ý thêm: Không sử dụng vòng lặp 'for (x in object)' cho mảng. Thay vào đó hãy sử dụng 'for (i = 0; i Zeta

Tôi sẽ nhớ điều đó và cho nó một shot. – stereoscience

Quá trình tạo một hộp kiểm tự động thực sự là tham gia nhiều hơn một chút so với việc tạo ra một sự lựa chọn,. Bạn cần phải tạo:

hộp kiểm
nhãn
và có thể là một <br> cho việc tạo kiểu

Dưới đây là các ý chính của mã này, với đầy đủ các fiddle tại 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"));  
    } 
}

Nguồn

2012-11-11 10:39:42

Cảm ơn bạn đã nhập. Tôi đã nhìn thấy câu trả lời của Zeta. Nhưng tôi đã thêm dòng br mà bạn đề nghị để làm cho nó trông đẹp hơn. – stereoscience

Cách tạo danh sách hộp kiểm động với javascript

Trả lời

Các vấn đề liên quan