Как создать список флажков динамически в зависимости от другого динамически созданного списка выбора в Javascript

Question

Я создаю списки выбора с различными временными интервалами (8 AM-5 PM, 9 AM-5 PM и т. Д.) Динамически исходя из количества даты от даты. Теперь я хочу создать список флажков, например 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]; 

или вы можете просто установить текст, если значение и текст являются одинаковыми.