IE 11 的选项组问题

Question

我正在使用 Javascript 动态加载 HTML select。在 Chrome 和 Firefox 中运行良好。在 IE11 中，它很好地添加了第一组，然后后续组嵌套在第一组下。我在 IE 中得到的 HTML 如下所示。我在JavaScript中使用的功能也在下面。这让我想知道我是否需要以某种方式关闭第一个选项组，但我没有看到任何文档或示例这样做。

    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

我可以在发布的 HTML 代码中看到某些选项组标签插入不正确。

我建议您参考下面的示例，它可以帮助您在 IE 浏览器中获得所需的结果。

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>

输出：

参考答案：

javascript html select add optgroup and option dynamically

Answer 2

这是我使用的最终代码。显然使用 .add 而不是 .appendchild 是关键。它确实需要在组循环中执行您的子循环。在此处发布之前，我的代码是一个添加所有组的循环，然后是一个向它们添加子项的循环。我认为这不适用于那种风格。

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

IE 11 的选项组问题

Option groups issue with IE 11

javascript

html

jquery

internet-explorer-11