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

Question

我们正在通过列表填充下拉列表中的选项。这些值被添加到 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
}                         

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

Answer 1

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

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)

对于选择2

$(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 来完成，您可以使用 javascript 在将 select2 附加到您想要的选择之前删除 not apply 选项

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