javascript - 显示div选定选项包含特定文本

Question

如果用户从列表中选择包含C-D（在这种情况下无关紧要的值或标签）的任何选项，我想显示下一个选项列表。我尝试使用 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="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>

标签： javascriptjquery

Answer 1

选择:contains()器旨在用于 jQuery 对象。要检查val字符串是否包含C-D，您可以改用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="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>