Javascript 从数组列表中获取特定值

Question

<select name="List" id="List">
    <option value="">-Select-</option>
    <option value="">--Product--</option>
    <option value="">product1</option>
    <option value="">product2</option>
    <option value="">product3</option>
    <option value="">--Software--</option>
    <option value="">software1</option>
    <option value="">software2</option>
    <option value="">software3</option>
    <option value="">--Services--</option>
    <option value="">service1</option>
    <option value="">service2</option>
    <option value="">service3</option>
</select>

我的 HTML 选择字段中有上述列表。

我只想获得值 --Product--、--Software--、--Services--所以我创建了一个循环来抛出产品列表，并使用方法 startwith 来获取以“--”开头的值。

function loadFilter() {
  var x = document.getElementById('List');
  var i;
  var n;
  for (i = 0; i < x.length; i++) {
    str = x[i].text
    var n = str.startsWith('--');
    flag = true;
    if (n == true) {
      alert(x[i].text);   // list --Product--, --Software--, --Services--
      alert(x[3].text);   // prints from the LIST <product1> and not <--Services-->
    }
  }
}

因此，当标志为真时，alert(x[i].text); 会正确列出值(--Product--、--Software--、--Services-- ).

但是当我尝试通过它们的值(索引)获取它们时，EG ..我只需要获取 (--Services--)，所以我使用 x[3].text) ，但这会返回整个列表值 >> 而不是 <--Services-->。

Answer 1

您可以使用下面的代码用带有“--”的选项列表填充数组arr。

然后您可以使用arr[2] 获取--Services--。

var arr = [];
[].slice.call(document.querySelectorAll("#List option")).map(function(el){
    if (el.text.indexOf("--") === 0) arr.push(el.text);
});

console.log(arr)
console.log(arr[2])

<select name="List" id="List">
    <option value="">-Select-</option>
    <option value="">--Product--</option>
    <option value="">product1</option>
    <option value="">product2</option>
    <option value="">product3</option>
    <option value="">--Software--</option>
    <option value="">software1</option>
    <option value="">software2</option>
    <option value="">software3</option>
    <option value="">--Services--</option>
    <option value="">service1</option>
    <option value="">service2</option>
    <option value="">service3</option>
</select>