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” 标签为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）您在装入文档时检查初始值，但是这样在进行其他选择时不会通知您。为此，您需要收听更改事件。

我已更新您的代码以解决这两个问题。我希望这一点很清楚。

$('#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作为容器元素包装在每个选择及其标签周围。因此，您可以轻松隐藏该容器的所有内容。另外，您必须观察选择的更改事件。触发该事件后，您可以比较选择的值或文本。该值是隐藏的实际值，可以提交给服务器等。文本是浏览器中呈现的内容。

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

Answer 4

使用jquery的onchange事件。

PageView(children: <Widget>[ 
ListView(itemExtent: width, 
// physics: const PageScrollPhysics(),     
scrollDirection: Axis.horizontal, 
children: [ Container(
margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.redAccent,), 
  Container(margin: EdgeInsets.symmetric(horizontal: 10.0),color: Colors.purpleAccent,), 
  Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.amberAccent,),
 ], 
), ], );

$('document').ready(function(){

$('#Soort').on('change',function(){

  var value = $(this).val();
  
  if(value ==="bordspel"){
    
    $('#4').fadeOut('slow');
    $('#Categorie_computer').remove();

}



});
});

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

4 个答案: