Question

我有以下选择下拉列表

<select id="strand_id" class="strand_options" name="strand[id]">
  <option value="1">Text Value</option>
  <option value="2">Text Value</option>
  <option value="3">Text Value</option>
  <option value="4">Text Value</option>
  <option value="5">Text Value</option>
  <option value="6">Text Value</option>
  <option value="7">Text Value</option>
</select>

我想要实现的是隐藏选项值4, 5, 6, and 7

到目前为止，我有一个数组（strand_array），其中包含所有选项值

var strand_array = [];
var select = document.getElementById('strand_id')
  for(var i=0; i < select.length; i++) {
    value = select.options[i].value;
    strand_array.push(value);
  }

  if(strand_array.indexOf('4','5','6','7') != -1 ){
    console.log('hide');
  }

我认为我需要做的是遍历每个strand_array值并说出

"if option values are 4, 5, 6, or 7 then hide them"

所以我一直在关注indexOf()，但似乎无法弄清楚如何正确使用它，我可以使用jQuery.inArray()很好，但我在这里挣扎（也许它太明显了？）

如果我要使用jQuery，我会做

var strand_options = $('.strand_options').find('option');
  strand_options.each(function(){
    if( jQuery.inArray($(this).val(), ['4', '5', '6', '7']) != -1 ){
      $(this).hide();
    }
 });

那我在哪里得到这个？

我没有正确迭代strand_array吗？

Answer 1

声明您想隐藏的值数组：

var toHide = ['4', '5', '6', '7'];

然后遍历选项：

var sel = document.getElementById("strand_id");
for (var i = 0; i < sel.length; ++i)
  if (toHide.indexOf(sel.options[i].value) >= 0)
     sel.options[i].style.display = "none";

Answer 2

使用删除而不是隐藏

var strand_options = $('.strand_options').find('option');
  strand_options.each(function(){
    if( jQuery.inArray($(this).val(), ['4', '5', '6', '7']) != -1 ){
      $(this).remove();
    }
 });

http://jsfiddle.net/hpn4vqo9/1/

Answer 3

请试试这个

var $strand_options = $('.strand_options').find('option');
            $strand_options.each(function () {                
                if (jQuery.inArray($(this).val(), ['4', '5', '6', '7']) != -1) {
                    $(this).hide();
                }
            });

使用JavaScript隐藏选择选项

3 个答案: