Question

我希望从选择输入中过滤选项列表并重新安装已过滤的列表。

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

我不确定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选项属性，您可以尝试这样的事情：

＆＃13;

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);

＆＃13;

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

＆＃13;

这是一个纯粹的JavaScript解决方案：

＆＃13;

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;

＆＃13;

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

＆＃13;

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>

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

2 个答案: