时间戳

首页 > 解决方案 > 如果数组中的选项值jQuery添加输入选项类

javascript - 如果数组中的选项值jQuery添加输入选项类

问题描述

我正在尝试添加一个类来根据从 ajax 调用收到的数组值选择选项值。

HTML

<select id="my_id">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

JAVASCRIPT

//array received from ajax call 
var array = [1,3,5]

// loop through dropdown options 
$("#my_id > option").each(function(i) {

    // if option value in array, add class 
    if ( array.indexOf(i.value) != -1 ) {

        // set matching values to red color 
        $(this).addClass("red");
    }

});

标签： javascriptjqueryhtmlajax

解决方案

回调的第一个参数是被迭代的索引，而不是元素。要获取元素，请参考this，以便this.value获取要检查的值。

但是.value元素的 总是一个字符串，所以也将数字数组转换为字符串数组。

您也可以考虑使用.includes而不是indexOf检查，仅在检查数组是否包含值时更合适（并且更具可读性）：

//array received from ajax call 
var array = [1, 3, 5]
const arrayStrs = array.map(String);

// loop through dropdown options 
$("#my_id > option").each(function() {
  // if option value in array, add class 
  if (arrayStrs.includes(this.value)) {

    // set matching values to red color 
    $(this).addClass("red");
  }

});
.red {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="my_id">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

（您也可以使用 Set 而不是数组，它会在 中查找O(1)，并且可能更合适，因为您不需要有序集合，只需一个集合 - 但这并不重要）

推荐阅读