当所选选项包含特定文本时显示div

Question

如果用户从包含CD列表中选择任何选项（在这种情况下，值或标签都没有关系），我想显示下一个选项列表。 我尝试了contains（）选择器，但是在某个地方出错。

我的HTML结构：

 <script> $(function () { $("#choose-material").change(function() { var val = $(this).val(); if(val:contains('C-D')) { $("#choose-size").show(); } }); }); </script> 

 #choose-size {display: none;) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="material-type" id="choose-material"> <option value="CD">CD</option> <option value="VV_C-D">VV_C-D</option> <option value="VV_C-B">VV_C-B</option> <option value="B_C-D">B_C-D</option> <option value="GL_WW">GL_WW</option> </select> <select name="material-size" id="choose-size"> <option value="Small">Small</option> <option value="Medium">Medium</option> <option value="Big">Big</option> </select> 

Answer 1

:contains()选择器旨在用于jQuery对象。 要检查val字符串是否包含CD ，可以改用indexOf() 。

还要注意，您可以通过使用toggle()并提供布尔结果作为参数来简化逻辑，该结果将依次显示或隐藏给定元素。 最后，请注意，您的CSS的结尾是)而不是} 。

话虽如此，请尝试以下操作：

 $(function() { $("#choose-material").change(function() { $("#choose-size").toggle($(this).val().indexOf('C-D') != -1); }).change(); }); 

 #choose-size { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="material-type" id="choose-material"> <option value="CD">CD</option> <option value="VV_C-D">VV_C-D</option> <option value="VV_C-B">VV_C-B</option> <option value="B_C-D">B_C-D</option> <option value="GL_WW">GL_WW</option> </select> <select name="material-size" id="choose-size"> <option value="Small">Small</option> <option value="Medium">Medium</option> <option value="Big">Big</option> </select> 

Answer 2

您可以使用String.prototype.includes（）

请注意，为了获得更好的浏览器兼容性，您可以像这样使用String.prototype.indexOf（） $(this).val().indexOf('C-D') !== -1

码：

 $('#choose-material').change(function() { if ($(this).val().includes('C-D')) { $("#choose-size").show(); } }); 

 #choose-size {display: none;) 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="material-type" id="choose-material"> <option value="CD">CD</option> <option value="VV_C-D">VV_C-D</option> <option value="VV_C-B">VV_C-B</option> <option value="B_C-D">B_C-D</option> <option value="GL_WW">GL_WW</option> </select> <select name="material-size" id="choose-size"> <option value="Small">Small</option> <option value="Medium">Medium</option> <option value="Big">Big</option> </select> 

Answer 3

试试下面的代码：

$(function () {
 $("#choose-material").change(function() {
 var val = $(this).val();
 if(val.indexOf("C-D")>=0) {
    $("#choose-size").show();
  }
 });
});

Answer 4

您可以通过形状/CD/g的正则表达式检查所选值是否包含CD子字符串，例如：

 $(function () { $("#choose-material").change(function() { var val = $(this).val(); if(val.match(/C\\-D/g)) { $("#choose-size").show(); } }); }); 

 #choose-size {display: none;) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="material-type" id="choose-material"> <option value="CD">CD</option> <option value="VV_C-D">VV_C-D</option> <option value="VV_C-B">VV_C-B</option> <option value="B_C-D">B_C-D</option> <option value="GL_WW">GL_WW</option> </select> <select name="material-size" id="choose-size"> <option value="Small">Small</option> <option value="Medium">Medium</option> <option value="Big">Big</option> </select> 

Answer 5

.contains（）和.includes（）都是实验性的，例如：非标准。 我不建议在生产系统中使用它们。 我现在坚持使用.indexOf（）。

使用indexOf方法很容易，您可以在此处查看indexOf和子字符串的教程： http : //www.dreamsyssoft.com/javascript-shell-scripting/strings-tutorial.php

 #choose-size {display: none;) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function () { $("#choose-material").change(function() { var val = $(this).val(); if(val.indexOf('C-D') !== -1) { $("#choose-size").show(); } else { $("#choose-size").hide(); } }); }); </script> <select name="material-type" id="choose-material"> <option value="CD">CD</option> <option value="VV_C-D">VV_C-D</option> <option value="VV_C-B">VV_C-B</option> <option value="B_C-D">B_C-D</option> <option value="GL_WW">GL_WW</option> </select> <select name="material-size" id="choose-size"> <option value="Small">Small</option> <option value="Medium">Medium</option> <option value="Big">Big</option> </select> 

Answer 6

您的代码有几个问题：

1. 您缺少$("#choose-size").hide(); 当值不包含CD
2. 您需要使用indexOf()或includes()来检查该值是否包含CD 。 首选使用indexOf()因为includes()在IE浏览器中不起作用。

 $(function () { $("#choose-material").change(function() { var val = $(this).val(); if(val.indexOf('C-D') !== -1) { $("#choose-size").show(); } else { $("#choose-size").hide(); } }); }); 

 #choose-size {display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="material-type" id="choose-material"> <option value="CD">CD</option> <option value="VV_C-D">VV_C-D</option> <option value="VV_C-B">VV_C-B</option> <option value="B_C-D">B_C-D</option> <option value="GL_WW">GL_WW</option> </select> <select name="material-size" id="choose-size"> <option value="Small">Small</option> <option value="Medium">Medium</option> <option value="Big">Big</option> </select>