如何根據Javascript中另一個動態創建的選擇列表動態創建複選框列表

Question

我使用不同的時間間隔（上午8點至下午5點，上午9點至下午5點等）創建選擇列表，動態地基於datepicker的日期。現在，我想創建一個複選框列表，如8 - 8:30，8：30-9：00，具體取決於從動態創建的選擇列表中選擇的選項。我的代碼如下。 Plz讓我知道爲什麼我的代碼不工作..並給我正確的代碼。

function OptionChange(ddl1,checkList1){ 
    var content = document.createElement("div"); 
    var checkList = document.createElement("tr"); 
    checkList.innerHTML = ""; 
     var times8_5 = new Array('8:00 AM - 8:30 AM', '8:30 AM - 9:00 AM', '9:00 AM - 9:30 AM', '9:30 AM - 10:00 AM', '10:00 AM - 10:30 AM' 
           ,'10:30 AM - 11:00 AM', '11:00 AM - 11:30 AM', '11:30 AM - 12:00 PM','12:00 PM - 12:30 PM','12:30 PM - 1:00 PM' 
           ,'1:00 PM - 1:30 PM','1:30 PM - 2:00 PM', '2:00 PM - 2:30 PM', '2:30 PM - 3:00 PM','3:00 PM - 3:30 PM','3:30 PM - 4:00 PM', '4:00 PM - 4:30 PM' 
           ,'4:30 PM - 5:00 PM'); 
switch (ddl1.value) { 
      case '8:00 AM - 5:00 PM': 
      for(i=0;i<times8_5.length;i++){ 
       var j=i+1; 
       var label= document.createElement("label"); 
       var description = document.createTextNode(times8_5[i]); 
       var checkbox = document.createElement("input"); 

       checkbox.type = "checkbox"; // make the element a checkbox 
       checkbox.name = "times8_5_"+j;  // give it a name we can check on the server side 
       checkbox.value = times8_5[i];   // 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 
       checkList.appendChild(label); 

      } 
      content.appendChild(checkList); 
      checkList1.appendChild(content); 
      // document.getElementById(checkList2).appendChild(checkList1); 
      break; 
      } 

} 

I am calling the above function from the below function xyz 

function xyz(number){ 

    var divElement = document.getElementById("selectList"); 
    divElement.innerHTML =""; 
    var content=document.createElement("div"); 

    for(i=1;i<=number;i++){ 
            var newDiv = document.createElement("tr"); 
            var text = "Select Time slot"; 
            var select = document.createElement("select"); 
            select.setAttribute("name", "Select" + i); 
            select.setAttribute("id", "Select" + i); 
            select.style.width = "300px"; 

            var option_empty; 
            option_empty = document.createElement("option"); 
            option_empty.setAttribute("value", "Select Time Slot"); 
            option_empty.innerHTML = "Select Time Slot"; 
            select.appendChild(option_empty); 
            /* var selectHTML = "Select time Slot"; 
            selectHTML +="<select name='Select"+i+"'>"; 
            for(i=0; i<choices.length; i=i+1){ 
           selectHTML += "<option value='"+choices[i]+"'>"+choices[i]+"</option>"; 
           } 
            selectHTML += "</select>"; */ 

            /* setting an onchange event */ 
            // selectNode.onchange = function() {dbrOptionChange()}; 

            var times8_5 = new Array('8:00 AM - 5:00 PM', '9:00 AM - 5:00 PM', '10:00 AM - 5:00 PM', '11:00 AM - 5:00 PM','12:00 PM - 5:00 PM' 
           ,'1:00 PM - 5:00 PM', '2:00 PM - 5:00 PM','3:00 PM - 5:00 PM', '4:00 PM - 5:00 PM'); 

            for(j=0;j<times8_5.length;j++){ 

            var option; 

            /* we are going to add two options */ 
            /* create options elements */ 
            option = document.createElement("option"); 
            option.setAttribute("value", times8_5[j]); 
            option.innerHTML = times8_5[j]; 

            select.appendChild(option); 
            var selectHTML = text ; 
            newDiv.innerHTML = selectHTML;       
            newDiv.appendChild(select); 

            } 

            content.appendChild(newDiv); 
           } 
           divElement.appendChild(content); 
           schedule_meeting_form.count_of_selects.value = number; 
           //document.getElementById("count_of_selects").childNodes[0].value = number; 
           var checkList1 = document.getElementById("checkList2"); 
           checkList1.innerHTML = ""; 
           select.onchange = OptionChange(this,checkList1); 

} 


My partial HTML code is : 


<tr><td><div id="selectList"></div></td></tr> 
<tr><td><div id="checkList2"></div></td></tr> 

Answer 1

我看到一對夫婦的問題：

1. 一個<tr>需要進入一個<table>，不進一家<div>或者你只是需要創建一個<div>容器而不是一個<tr>的，如果你不實際上打算使用一張桌子。
2. 創建新內容後，需要將其插入到頁面中。我只看到你創建了一堆獨立的新內容，但沒有插入到實際頁面中。
3. 如果您打算將父表作爲表格，則<tr>中的數據需要位於<td>中，並且您將該複選框直接插入到<tr>中。

您的代碼來創建這樣的HTML是無效的：

<div> 
    <tr> 
     <label> 
      <input type="checkbox" name="times8_5_1"> 
     </label> 
    </tr> 
</div> 

如果你不打算使用一個表，那麼就應該是這個：

<div> 
    <div> 
     <label> 
      <input type="checkbox" name="times8_5_1"> 
     </label> 
    </div> 
</div> 

如果您在HTML之前和之後顯示（最初的樣子以及添加複選框後的樣子），那麼我們可以更具體地建議最佳代碼。

Answer 2

只是一個註釋的，你必須：

> option = document.createElement("option"); 
> option.setAttribute("value", times8_5[j]); 
> option.innerHTML = times8_5[j]; 

你不應該使用innerHTML屬性，因爲一個選項元素沒有被標記的內容。你可以這樣做：

option = new Option(times8_5[j], times8_5[j]); 

，或者如果你想使用的createElement：

option = document.createElement("option"); 
option.value = times8_5[j]; 
option.text = times8_5[j]; 

，或者你可以只設置文本如果值和文本都是相同的。