Question

如果在没有ID的循环中有多个select元素，我如何维护正确的HTMLSelectElement.selectedIndex？

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

以下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，因为你用它标记了你的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: