如何使用可能的值列表筛选选项列表

Question

我希望从select输入中筛选出一个选项列表，并重新装入筛选后的列表。

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

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

var initial_options = $('select_id').options

这些选项的形式如下：

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

​

Answer 2

这是一个与你的last question相结合的答案。使用纯javascript。

​

var selectBoxEl = document.getElementById('selectBox');
var arrayOfNodes = selectBoxEl.childNodes;
var optionsArr = [];
var filteredArr = [];

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

// loop through child nodes of select box and store option nodes as a string in array
for (var i = 0; i < arrayOfNodes.length; i++) {
  if (arrayOfNodes[i].nodeName === 'OPTION') {
    optionsArr.push(arrayOfNodes[i].outerHTML);
  }
}

// function to filter options array and set select box options to filtered array
function filterOptions(filterOps) {
  console.log(optionsArr[0].indexOf('value="'));
  var val;
  for (var i = 0; i < optionsArr.length; i++) { 
    val = optionsArr[i].substring(optionsArr[i].indexOf('value="') + 7, optionsArr[i].indexOf('value="') + 8);
    if (filterOps.indexOf(parseInt(val)) !== -1) {
      filteredArr.push(optionsArr[i]);
    }
  }
  selectBoxEl.innerHTML = filteredArr;
}

filterOptions(option_values_filter);

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

​