javascript - 多个select元素在同一个页面时，如何获取正确的selectedIndex？

Question

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

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

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

问题来自于 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 元素上反射(reflect)该变化，以便能够对其进行相应的样式设置。下面是一个建议。我使用了 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>