Question

如果用户从列表中选择包含C-D的任何选项（在值或标签中它在这种情况下并不重要），我想显示下一个选项列表。我尝试使用contains（）选择器，但某处有一个错误。

我的HTML结构：

＆＃13;

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

＆＃13;

#choose-size {display: none;)

＆＃13;

<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="C-D">C-D</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>

＆＃13;

Answer 1

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

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

尽管如此，试试这个：

＆＃13;

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

＆＃13;

#choose-size {
  display: none;
}

＆＃13;

<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="C-D">C-D</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>

＆＃13;

Answer 2

您可以使用String.prototype.includes()

请注意，为了获得更多浏览器兼容性，您可以使用$(this).val().indexOf('C-D') !== -1这样的$('#choose-material').change(function() { if ($(this).val().includes('C-D')) { $("#choose-size").show(); } });

代码：

＆＃13;

#choose-size {display: none;)

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="material-type" id="choose-material">
	<option value="C-D">C-D</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>

＆＃13;

Warning: Prop 'className' did not match. Server: "null" Client: "dashboard-logo__2KAqT"

＆＃13;

Answer 3

尝试以下代码：

<VirtualHost *:443>
    ServerName "<your server name>"
    DocumentRoot "<your path>"
</VirtualHost>

Answer 4

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

＆＃13;

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

＆＃13;

#choose-size {display: none;)

＆＃13;

<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="C-D">C-D</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>

＆＃13;

Answer 5

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

使用indexOf方法很简单，你可以在这里看到indexOf和substring的教程：http://www.dreamsyssoft.com/javascript-shell-scripting/strings-tutorial.php

＆＃13;

#choose-size {display: none;)

＆＃13;

<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="C-D">C-D</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>

＆＃13;

Answer 6

您的代码有几个问题：

当值不包含$("#choose-size").hide();

C-D

您需要使用indexOf()或includes()来检查该值是否包含C-D。优先使用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="C-D">C-D</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>

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

6 个答案: