Option groups issue with IE 11

Question

I'm using Javascript to load an HTML select dynamically. Works great in Chrome and Firefox. In IE11 It adds the first group fine then subsequent groups are nested under the first group. The HTML I get in IE is shown below. The function I use in JavaScript is also below. It makes me wonder if I need to close the first option group somehow but I don't see any documentation or samples doing that.

 function Fill_TaskForPersonTasks() { let dropdown = document.getElementById('selTaskForPerson'); //removeOptions(dropdown); var tasks = TaskTemplate; var tetsID = 0; var optGroup; var date = new Date(document.getElementById('txtStart').value); var pt = []; var tt = []; //used to filter persontasks to just selected date for (let j = 0; j < PersonTasks.length; j++) { perTask=PersonTasks[j]; if (perTask.TaskDateView === document.getElementById('txtStart').value) { pt.push(perTask); } } if (allowEdits === true) { for (let i = 0; i < TaskTemplate.length; i++) { var task = TaskTemplate[i]; var bln = false; //if tettID not in PersonTasks for (let j = 0; j < pt.length; j++) { perTask = pt[j]; if (perTask.tettID === task.tettID) { //delete tasks[i]; bln = true; break; } } if (bln === false) { tt.push(task); } } } else if (allowEdits_PTO === true) { for (let i = 0; i < TaskTemplate.length; i++) { var task = TaskTemplate[i]; if (task.tettID === 5) { tt.push(task); } } } else { //array should be empty, no tasks allowed to be added } $('#selTaskForPerson').find('optgroup, option').remove(); for (let i = 0; i < tt.length; i++) { var task = tt[i]; if (tetsID !== task.tetsID) { optGroup = document.createElement('optGroup'); //optGroup.setAttribute("label", task.TaskSectionDescription); optGroup.label = task.TaskSectionDescription; optGroup.id="Person" + task.TaskSectionDescription; dropdown.add(optGroup); for (let j = 0; j < tt.length; j++) { if (tt[j].tetsID == tt[i].tetsID) { var taskOpt = tt[j]; option = document.createElement('option'); option.text = taskOpt.TaskDescription; option.value = taskOpt.tettID; //og = document.getElementById("Person" + taskOpt.TaskSectionDescription); optGroup.appendChild(option); } } } tetsID = task.tetsID; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-xs-3 "> <select name="selTaskForPerson" class="form-control" id="selTaskForPerson"> <optgroup id="PersonAudits" label="Audits"> <optgroup id="PersonAsst Director" label="Asst Director"> <option value="49">Budget Related</option> <option value="50">Transactions Group Support</option> </optgroup> <optgroup id="PersonAdministration" label="Administration"> <option value="64">Check receipt/logging</option> <option value="60">Contracts</option> <option value="63">Mail</option> <option value="62">Office Administration</option> <option value="61">Sponsor Setup/Review</option> </optgroup> <optgroup id="PersonManagement Group Tasks" label="Management Group Tasks"> <option value="57">Fee For Service</option> <option value="48">Group Support</option> <option value="58">Office Operations</option> <option value="59">Special Projects</option> </optgroup> <optgroup id="PersonEffort Tasks" label="Effort Tasks"> <option value="40">100% Sponsored</option> <option value="34">Effort</option> <option value="38">Notes on ER</option> <option value="36">Old Pay Changes/Manual Corrections</option> <option value="35">Pending CS</option> <option value="37">RA/RE Accts</option> <option value="39">Salary Cap</option> </optgroup> <optgroup id="PersonAwards Group Tasks" label="Awards Group Tasks"> <option value="45">AE Notes</option> <option value="42">Mods (not NCE) </option> <option value="43">NCEs </option> <option value="41">New Accounts</option> <option value="46">PI Separation </option> <option value="44">Subawards</option> </optgroup> <optgroup id="PersonOther" label="Other"> <option value="16">F&amp;A</option> <option value="56">Other</option> <option value="17">Other - CM</option> <option value="18">Other - Reports &amp; Data </option> </optgroup> <optgroup id="PersonCash Management Group Tasks" label="Cash Management Group Tasks"> <option value="24">RG Cash Receipts/Research</option> </optgroup> <optgroup id="PersonReports Group" label="Reports Group"> <option value="26">Closeouts</option> <option value="25">Reporting</option> </optgroup> <optgroup id="PersonTransactions Group Tasks" label="Transactions Group Tasks"> <option value="52">Concur Travel Transactions</option> <option value="51">General Error Corrections</option> <option value="27">KFS Transactions </option> <option value="29">Other Transactions </option> <option value="28">Salary Transactions </option> </optgroup> <option value="3">Audits</option> </optgroup> </select> </div>

Answer 1

I can see in the posted HTML code that some option group tags inserted incorrectly.

I suggest you refer to the example below that may help you to get the desire results in the IE browser.

 var opt = { friendchat:[ {name:"somefriend1"}, {name:"somefriend2"} ], otherchat:[ {name:"someother1"}, {name:"someother2"} ], friendrequest:[ {name:"somerequest1"}, {name:"somerequest2"} ], sentrequest:[ {name:"somesent1"}, {name:"somesent2"} ] }; function add_optgr(sel, lab, opts) { var i, gr = document.createElement('OPTGROUP'), len = opts.length, opt; gr.label = lab; for (i = 0; i < len; ++i) { opt = document.createElement('OPTION'); opt.textContent = opts[i].name; gr.appendChild(opt); } sel.appendChild(gr); return gr; } function build_select(wrap, size, opt) { var sel = document.createElement('SELECT'), prop; size = size || 1; sel.size = size; for (prop in opt) if (opt.hasOwnProperty(prop)) add_optgr(sel, prop, opt[prop]); wrap.appendChild(sel); } build_select( document.getElementById('wrap_sel'), 6, opt );

 <h1>how to add them with code only:</h1> <div id="wrap_sel"></div>

Output:

Referenced answer:

javascript html select add optgroup and option dynamically

Answer 2

Here is the final code I used. Apparently using .add instead of .appendchild is the key. It does require doing your child loop within the group loop. My code before posting here had been a loop of adding all groups followed by a loop of adding children to them. I don't think this would work with that style.

 function Fill_TaskForPersonTasks() { let dropdown = document.getElementById('selTaskForPerson'); //removeOptions(dropdown); var tasks = TaskTemplate; var tetsID = 0; var optGroup; var date = new Date(document.getElementById('txtStart').value); var pt = []; var tt = []; //used to filter persontasks to just selected date for (let j = 0; j < PersonTasks.length; j++) { perTask=PersonTasks[j]; if (perTask.TaskDateView === document.getElementById('txtStart').value) { pt.push(perTask); } } if (allowEdits === true) { for (let i = 0; i < TaskTemplate.length; i++) { var task = TaskTemplate[i]; var bln = false; //if tettID not in PersonTasks for (let j = 0; j < pt.length; j++) { perTask = pt[j]; if (perTask.tettID === task.tettID) { //delete tasks[i]; bln = true; break; } } if (bln === false) { tt.push(task); } } } else if (allowEdits_PTO === true) { for (let i = 0; i < TaskTemplate.length; i++) { var task = TaskTemplate[i]; if (task.tettID === 5) { tt.push(task); } } } else { //array should be empty, no tasks allowed to be added } $('#selTaskForPerson').find('optgroup, option').remove(); for (let i = 0; i < tt.length; i++) { var task = tt[i]; if (tetsID !== task.tetsID) { optGroup = document.createElement('optGroup'); //optGroup.setAttribute("label", task.TaskSectionDescription); optGroup.label = task.TaskSectionDescription; optGroup.id = "Person" + task.TaskSectionDescription; //had to switch this to a later appendchild because IE //this works fine for chrome and firefox //IE adds them but 2nd group onwards were nested inside of first which isn't allowed and doesn't show //dropdown.add(optGroup); for (let j = 0; j < tt.length; j++) { if (tt[j].tetsID == tt[i].tetsID) { var taskOpt = tt[j]; option = document.createElement('option'); option.text = taskOpt.TaskDescription; option.value = taskOpt.tettID; //og = document.getElementById("Person" + taskOpt.TaskSectionDescription); optGroup.appendChild(option); } } dropdown.appendChild(optGroup); } tetsID = task.tetsID; } }