当选择了另一个选择器的值时，如何隐藏另一个选择器？

Question

当选择了另一个选择器的值时，我想隐藏一个选择器

我已经尝试了下面的代码，但是它不能工作

我的jquery代码：

​

$(document).ready(function () {
    if ($('#Soort').val() == "Bordspellen") {
        $('#Categorie_computer').hide();
        $('#4').hide();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="2">Wat speelt u meestal?</label>
<select id="Soort" name="Soort">
    <option value="">Kies...</option>
    <option value="bordspel">Bordspellen</option>
    <option value="computer">Computergame's</option>
</select>

<br>

<label id="4">Welke Categorie Computergame speelt u meestal?</label>
<select id="Categorie_computer" name="Categorie_computer">
    <option value="">Kies...</option>
    <option value="Sport">Sport games</option>
    <option value="Adventure">Adventure games</option>
    <option value="War">War games</option>
    <option value="Stategisch_computer">Strategische games</option>
</select>

​

我希望如果在标签id为2的选择器中选择了"Bordspellen“，标签为id为4的选择器将隐藏

Answer 1

将change事件添加到您的第一个select标记中，并检查所选的选项值。如果是bordspel，则隐藏另一个选择器。

​

$('#Soort').on('change', function() {
  if ($(this).val() === 'bordspel') {
    $('#4, #Categorie_computer').hide();
  } else {
    $('#4, #Categorie_computer').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="2">Wat speelt u meestal?</label>
<select id="Soort" name="Soort">
  <option value="">Kies...</option>
  <option value="bordspel">Bordspellen</option>
  <option value="computer">Computergame's</option>
</select>

<label id="4">Welke Categorie Computergame speelt u meestal?</label>
<select id="Categorie_computer" name="Categorie_computer">
  <option value="">Kies...</option>
  <option value="Sport">Sport games</option>
  <option value="Adventure">Adventure games</option>
  <option value="War">War games</option>
  <option value="Stategisch_computer">Strategische games</option>
</select>

​

Answer 2

你的代码有两个问题：

1)将select元素的值与'Bordspellen‘进行比较，但分配给该选项的值是'bordspel’。这种比较永远不会是真的。你应该检查'#Soort‘的值是否等于'bordspel’。

2)在加载文档时检查初始值，但这样做不会在做出不同的选择时通知您。要实现这一点，您需要侦听change事件。

我已经更新了你的代码来解决这两个问题。我希望这能说明这一点。

​

$('#Soort').change(function() {
    if ($('#Soort').val() == "bordspel") {
        $('#Categorie_computer').hide();
        $('#4').hide();
    } else {
        $('#Categorie_computer').show();
        $('#4').show();    
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="2">Wat speelt u meestal?</label>
<select id="Soort" name="Soort">
    <option value="">Kies...</option>
    <option value="bordspel">Bordspellen</option>
    <option value="computer">Computergame's</option>
</select>
<label id="4">Welke Categorie Computergame speelt u meestal?</label>
<select id="Categorie_computer" name="Categorie_computer">
    <option value="">Kies...</option>
    <option value="Sport">Sport games</option>
    <option value="Adventure">Adventure games</option>
    <option value="War">War games</option>
    <option value="Stategisch_computer">Strategische games</option>
</select>

​

Answer 3

您可以将div包装为每个select及其标签的容器元素。因此，您可以轻松地隐藏该容器的所有内容。您还必须观察select的change-event。当该事件被触发时，您可以比较选定内容的值或文本。值是隐藏的、可以提交给服务器等的实际值，文本是在浏览器中呈现的内容。

​

$('#Soort').on('change', function(){
  if ($('#Soort').val() == "bordspel") {
    $('#container-4').hide();
  } else {
    $('#container-4').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container-2">
  <label>Wat speelt u meestal?</label>
  <select id="Soort" name="Soort">
    <option value="">Kies...</option>
    <option value="bordspel">Bordspellen</option>
    <option value="computer">Computergame's</option>
  </select>
</div>

<div id="container-4">
  <label>Welke Categorie Computergame speelt u meestal?</label>
  <select id="Categorie_computer" name="Categorie_computer">
    <option value="">Kies...</option>
    <option value="Sport">Sport games</option>
    <option value="Adventure">Adventure games</option>
    <option value="War">War games</option>
    <option value="Stategisch_computer">Strategische games</option>
  </select>
</div>

​