如何使用 jquery 在下拉列表中隐藏选项？

问题描述

我们通过列表填充下拉列表中的选项。这些值添加到 Action 类的列表中。 当 option 等于特定值时，我们想隐藏它。

代码如下：

if (stuval.substring(0,7) == "<option") {  
   $('#stuclass option:not(:first)').remove(); 
   $('#stuclass').find('option').end().append($(stuval));
   $("#stuclass option[value='not apply']").css("display","none"); // Not working
}                         

当值为“不适用”时如何隐藏选项？使用上面的代码和使用索引尝试过。但它不起作用。请帮助。

解决方法

可能是一个空格，值中的小写/大写阻止它被选择.. 一些方法

1- 使用 * 表示包含 [value*='not apply'] 以这种方式您需要注意小写和大写并使用确切的值 .. 如果您必须使用它的 Not Apply使用 [value*='Not Apply']

#stuclass option[value*="not apply"]{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="stuclass">
  <option value="apply">Apply</option>
  <option value= "not apply">Not Apply</option>
</select>

2- 使用 .filter() 与 toLowerCase() 和 .trim() .. 我认为这种方式比第一种方式更有效

$('#stuclass option').filter(function(){
  return $(this).val().toLowerCase().trim() == 'not apply'
}).hide(0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="stuclass">
  <option value="apply">Apply</option>
  <option value= "not apply">Not Apply</option>
</select>

附注：

• .end() 此处的 $('#stuclass').find('option').end().append($(stuval)); 将返回 $('#stuclass')，因此您可以直接使用 $('#stuclass').append($(stuval))

• 还有 if (stuval.substring(0,7) == "<option") 最好是 if (stuval.trim().substring(0,7) == "<option") 避免任何左/右空格或者你可以使用 if(stuval.indexOf('<option') > -1)

对于select2

$(document).ready(function(){
  $('select').select2();
});

.select2-results [data-select2-id*="not apply"]{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous"></script>
<select id="stuclass">
  <option value="apply">Apply</option>
  <option value= "not apply">Not Apply</option>
</select>

要隐藏某些 select2 中的选项，它不能通过使用 css 来完成，您可以在将 select2 附加到您想要的选择之前使用 javascript 删除不应用选项

$(document).ready(function(){
  $('#stuclass,#stuclass3').find('[value*="not apply"]').remove();
  $('select').select2();
});

.select2{
  min-width : 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous"></script>
<select id="stuclass">
  <option value="apply">Apply</option>
  <option value= "not apply">Not Apply</option>
</select>

<select id="stuclass2">
  <option value="apply">Apply 2</option>
  <option value= "not apply">Not Apply 2</option>
</select>

<select id="stuclass3">
  <option value="apply">Apply 3</option>
  <option value= "not apply">Not Apply 3</option>
</select>

<select id="stuclass4">
  <option value="apply">Apply 4</option>
  <option value= "not apply">Not Apply 4</option>
</select>