Question

我正在根据datepicker的日期数动态创建具有不同时间间隔（上午8点到下午5点，上午9点到下午5点等）的选择列表。现在，我想创建一个复选框列表，如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

我看到了几个问题：

<tr>需要进入<table>，而不是进入<div>，或者您需要创建一个<div>容器而不是<tr>你实际上并不打算使用一张桌子。
创建新内容后，您需要将其插入页面。我只看到您创建了一堆独立的新内容，但未将其插入实际页面。
如果您打算将父级作为表格，则<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元素的内容不是标记。你可以这样做：

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

或者如果您想使用 createElement ：

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

或者如果值和文本相同，则可以设置文本。

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

2 个答案: