Databases
StackOverflow2013
Postsdbo
POHow to create a list of check boxes dynamically depending on another dynamically created select list in Javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create a list of check boxes dynamically depending on another dynamically created select list in Javascript
    primarykey
    data
    text
    <p>I am creating select lists with different time intervals (8 AM-5 PM, 9 AM- 5 PM etc) dynamically basing on the number of dates from datepicker. Now, i want to create a list of checkboxes like 8 - 8:30, 8:30-9:00 depending on the option selected from the dynamically created select list. My code is below. Plz let me know why my code is not working.. and give me the correct code.</p> <pre><code>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&lt;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&lt;=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 +="&lt;select name='Select"+i+"'&gt;"; for(i=0; i&lt;choices.length; i=i+1){ selectHTML += "&lt;option value='"+choices[i]+"'&gt;"+choices[i]+"&lt;/option&gt;"; } selectHTML += "&lt;/select&gt;"; */ /* 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&lt;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 : &lt;tr&gt;&lt;td&gt;&lt;div id="selectList"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div id="checkList2"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USghost
    1. USuser2330222
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to create a list of check boxes dynamically depending on another dynamically created select list in Javascript
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COWhat do you mean by _my code is not working_? Any errors in console or something?
      singulars
      1. POHow to create a list of check boxes dynamically depending on another dynamically created select list in Javascript
      1. USghost
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload