javascript - 如何使用可能值列表过滤选项列表

Question

我正在寻找从选择输入中过滤选项列表并重新安装过滤后的列表。

后端将发送要过滤的选项值数组，这些选项值与列表中的值匹配。

我不确定 options 是否是最好的属性？ (

var initial_options = $('select_id').options

选项的形式是eg

 [
    '<option value="" selected="">Option 0</option>', 
    '<option value="1">Option 1</option>'],
    ...
 ]

用于过滤的返回数据的形式为

var option_values_filter = [1,3,5,6]

然后安装:

$('#select_id').html(filtered_options)

Answer 1

假设您的值过滤器试图过滤实际的 value 选项属性，您可以尝试这样的事情:

const option_values_filter = [1, 3, 4];

const filtered = $("#id option").filter((index, option) => {
  return (option_values_filter.indexOf(parseInt(option.value)) !== -1);
});

$(id).html(filtered);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="id">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

这是一个纯javascript的解决方案:

const option_values_filter = [1, 3, 4];

const selectElement = document.getElementById("id");
const newOptions = Array.apply(null, selectElement.options).filter((option) => {
	return option_values_filter.indexOf(parseInt(option.value)) !== -1;
}).map(option => option.outerHTML);

selectElement.innerHTML = newOptions;

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