如何根据Javascript中另一个动态创建的选择列表动态创建复选框列表

我正在根据datepicker的日期数量动态创建具有不同时间间隔（上午8点到下午5点，上午9点到下午5点等）的选择列表。现在，我想创建一个复选框列表，如8-8:30、8:30-9:00，具体取决于从动态创建的选择列表中选择的选项。我的代码如下。请让我知道为什么我的代码不起作用。。给我正确的密码

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>

功能选项更改（ddl1，检查列表1）{
var content=document.createElement（“div”）；
var检查表=document.createElement（“tr”）；
checkList.innerHTML=“”；
var times8_5=新阵列（'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-上午11:00”，“上午11:00-上午11:30”，“上午11:30-下午12:00”，“下午12:00-下午12:30”，“下午12:30-下午1:00”
，“下午1:00-1:30”，“下午1:30-2:00”，“下午2:00-2:30”，“下午2:30-3:00”，“下午3:00-3:30”，“下午3:30-4:00”，“下午4:00-4:30”
‘下午四时三十分至五时’；
开关（ddl1.value）{
案例“上午8:00至下午5:00”：
对于（i=0；i我发现了几个问题：

需要进入一个
，而不是进入一个
，或者如果您实际上不打算使用表，您只需要创建一个
容器而不是

创建新内容后，您需要将其插入页面。我只看到您在哪里创建了一组独立的新内容，但没有将其插入实际页面
如果您希望父级是一个表，则
中的数据需要位于
中，并且您要将复选框直接插入
中
您的代码正在尝试创建无效的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的前后代码（最初的外观以及添加复选框后的外观），那么我们可以更具体地建议最佳代码。
只需一条注释，您可以：

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

您不应使用innerHTML属性，因为option元素的内容不是标记。您可以执行以下操作：

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

或者，如果要使用createElement：

或者，如果值和文本相同，您可以只设置文本。
我的代码不起作用是什么意思？控制台中有错误吗？+1，并且也不能在IE中修改TR的innerHTML，因此这不是一个好策略。checkList1是在另一个函数中创建的div元素。它附加了checkboxes@user2330222-给我们看什么最后的HTML应该如下所示（编辑您的问题以将其添加到末尾）。根据另一个动态创建的选择的输入选项动态创建的复选框列表
option = document.createElement("option");
option.value = times8_5[j];
option.text = times8_5[j];