当多个选择元素在同一页面上时，如何获得正确的selectedIndex？

Question

当循环中有多个没有ID的选择元素时，如何维护正确的HTMLSelectElement.selectedIndex？

我正在网页上加载动态表单，该网页包含带有优先级列表的select元素。 每个优先级具有不同的颜色作为选项，并且在选择时，应将相同的颜色/ Css类应用于选择元素。 可以添加许多这样的形式，因此页面上有多个具有相同优先级列表的选择元素。

以下JS函数可将样式应用于选项，但一旦页面上的样式超过，就无法将样式应用于select元素。

问题来自selectedIndex总是返回页面上最后一个元素的选定索引。

我怎样才能解决这个问题？

function ddlColoring(high,medium,low,psar)
{

    var selectArray = document.getElementsByClassName('ac-priority');

    for (var t = 0; t < selectArray.length; t++) {
        var select = selectArray[t];

        for (var i = 0; i < select.options.length; i++) {

            if (select.options[i].value === high) {
                select.options[i].className = "lbl-action-priority-high";

                if (i == select.selectedIndex) {
                    select.className = "lbl-action-priority-high ac-priority";
                }
            }
            else if (select.options[i].value === medium) {
                select.options[i].className = "lbl-action-priority-medium";
                if (i == select.selectedIndex) {
                    select.className = "lbl-action-priority-medium ac-priority";
                }
            }
            else if (select.options[i].value === low) {
                select.options[i].className = "lbl-action-priority-low";
                if (i == select.selectedIndex) {
                    select.className = "lbl-action-priority-low ac-priority";
                }
            }
            else if (select.options[i].value === psar) {
                select.options[i].className = "lbl-action-priority-psar";
                if (i == select.selectedIndex) {
                    select.className = "lbl-action-priority-psar ac-priority";
                }
            }
            else {
                select.options[i].className = "";
            }


            select.onchange = function () {

                for (var j = 0; j < select.options.length; j++) {

                    if (j == select.selectedIndex) {

                        if (select.options[j].value === high) {
                            select.className = "lbl-action-priority-high ac-priority";
                        }
                        else if (select.options[j].value === medium) {

                            select.className = "lbl-action-priority-medium ac-priority";
                        }
                        else if (select.options[j].value === low) {

                            select.className = "lbl-action-priority-low ac-priority";
                        }
                        else if (select.options[j].value === psar) {

                            select.className = "lbl-action-priority-psar ac-priority";
                        }
                        else {
                            select.className = "";
                        }
                    }
                }
            }
        }
    }
}

Answer 1

您只需要侦听事件更改，并以某种方式将更改反映在select元素上，即可对其进行样式设置。 以下是一个建议。 我使用jQuery是因为您用它标记了问题。

 $('.priority-select').on('change', function() { var $el = $(this); var selectedPriority = $el.val(); $el.attr('data-priority', selectedPriority); }); 

 .priority-select { border: 3px solid; } .priority-select[data-priority="high"] { border-color: red; } .priority-select[data-priority="medium"] { border-color: orange; } .priority-select[data-priority="low"] { border-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="priority-select"> <option value="">Select a Priority</option> <option value="high">high</option> <option value="low">low</option> <option value="medium">medium</option> </select> <select class="priority-select"> <option value="">Select a Priority</option> <option value="high">high</option> <option value="low">low</option> <option value="medium">medium</option> </select> <select class="priority-select"> <option value="">Select a Priority</option> <option value="high">high</option> <option value="low">low</option> <option value="medium">medium</option> </select>