複数のselect要素が同じページにある場合に、正しいselectedIndexを取得するにはどうすればよいですか？

Question

IDなしのループ内に複数のselect要素がある場合、正しいHTMLSelectElement.selectedIndexをどのように維持するのですか？

ウェブページに動的フォームをロードしています。優先度のリストを持つselect要素が含まれています。各優先度はオプションとして異なる色を持ち、選択されたときに同じ色/ 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

イベントをリッスンして、それに応じてスタイルを変更できるように、変更内容を選択要素に反映させるだけで済みます。以下は一つの提案です。私は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>