Javascript 使用JS分别为HTML网页的下拉列表中的文本和背景选项着色-本地

HTML

<select name="selItemName" id="ItemName" class="selectItemName">
              <option value="" selected="selected">Select Item Name</option>
              <option class="TierI"></option>
            </select>

            <select name="selTier" id="Tier" class="test2">
                <option value="" selected="selected">Select Tier</option>
            </select>

            <select name="selEnchantment" id="Enchantment" class="test3">
                <option value="" selected="selected">Select Enchantment</option>
            </select>


**JS/Javascript-no-modules**

var ItemNames = {"Cotton":[],

"Flax":[],

"Hemp":[],

};

window.onload = function() { 

  var selItemName = document.getElementById("ItemName");

  for (var x in ItemNames) {
    selItemName.options[selItemName.options.length]= new Option(x, x);
  }

}

<select id="selItemName" class="selectItemName">
            <option selected value="" aria-required="true">-- Select the Item Name --</option>

            <option value="Cotton" class="TierI">Cotton</option>

            <option value="Flax" class="TierII">Flax</option>

            <option value="Hemp" class="TierIII">Hemp</option>
            <option value="Uncommon_Hemp" class="TierIV">Uncommon Hemp</option>
            </select>

抱歉，如果这有点难以理解。

对于HTML

          <select id="selItemName" class="selectItemName">
            <option selected value="" aria-required="true">-- Select the Item Name -- 
            </option>

            <option value="Cotton" class="TierI">Cotton</option>

            <option value="Flax" class="TierII">Flax</option>

            <option value="Hemp" class="TierIII">Hemp</option>
            <option value="Uncommon_Hemp" class="TierIV">Uncommon Hemp</option>
          </select>

---

这将改变

选项

标记的背景。

对于这一项，我已经成功地做到了。感谢您的努力，但我主要关注的是这些代码的JavaScript版本。有点想把大部分代码文件分成更小的部分。

          <select id="selItemName" class="selectItemName">
            <option selected value="" aria-required="true">-- Select the Item Name -- 
            </option>

            <option value="Cotton" class="TierI">Cotton</option>

            <option value="Flax" class="TierII">Flax</option>

            <option value="Hemp" class="TierIII">Hemp</option>
            <option value="Uncommon_Hemp" class="TierIV">Uncommon Hemp</option>
          </select>

.TierX {
  background-color: red;
}