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

Question

我们正在通过 list.The 在操作 class 中的列表中添加值来填充下拉列表中的选项。当 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
}

如何在值为 'Not apply' 时隐藏该选项？尝试使用上述代码并使用 index.But 它没有 working.Kindly 帮助。

Answer 1

可能是一个空格，lower/uppercase 在一个值中阻止它从 selection .. 一些方式

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));会return到$('#stuclass')所以可以直接用$('#stuclass').append($(stuval))
另外 if (stuval.substring(0, 7) == "<option") 最好是 if (stuval.trim().substring(0, 7) == "<option") 以避免任何 left/right 空格或者你可以使用 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 无法完成，您可以使用 javascript 在附加 select2到你想要的select

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

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

How to hide an option in a dropdown using jquery?

jquery

options

dropdown