0

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

2 回答 2

1

我看到几个问题：

  1. A<tr>需要进入 a <table>，而不是 a ，或者如果您实际上不打算使用表，则<div>只需创建一个<div>容器而不是a 。<tr>
  2. 创建新内容后，您需要将其插入到页面中。我只看到您在哪里创建了一堆独立的新内容，但没有将其插入实际页面。
  3. 如果您打算将父级设为表，则 a 中的数据<tr>需要位于 a 中<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 的前后（最初的样子和添加复选框后的样子），那么我们可以更具体地建议最好的代码。

于 2013-04-28T22:47:58.397 回答
0

只是一个评论 - 你有：

> 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];

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

于 2013-04-28T23:14:58.320 回答