Question

我已经尝试了大约一个小时才能使此代码正常工作，但这只是在黑暗中的痛苦。好吧，让我们开始追逐吧。我正在尝试创建一个选择字段，以根据

内容

text2

text3

Answer 1

当前逻辑的问题是，您正在从val()中检索一个字符串，并将其与switch中的int进行比较，因此default块始终作为比较失败。要将其与字符串进行比较，或将val()转换为整数。

$(document).ready(function() {
  $('#mySelect').change(function() {
    let item1 = $("#item1");
    let item2 = $("#item2");
    let item3 = $("#item3");

    switch ($('select[name=mySelect]').val()) {
      case '1':
        item1.show();
        item2.hide();
        item3.hide();
        break;
      case '2':
        item1.hide();
        item2.show();
        item3.hide();
        break;
      case '3':
        item1.hide();
        item2.hide();
        item3.show();
        break;
      default:
        item1.hide();
        item2.hide();
        item3.hide();
        break;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" name="mySelect">
  <option value="0" disabled selected>-- Select your item--</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
</select>

<div id='item1'>
  <p> contents
</div>

<div id='item2'>
  <p> text2</p>
</div>

<div id='item3'>
  <p> text3</p>
</div>

但是，您可以通过在所有div元素上放置一个通用类，从而以更轻松的方式实现目标，以便在选择更改时轻松地将它们全部隐藏。然后，可以通过串联所选值来构建id选择器字符串，如下所示：

$(document).ready(function() {
  $('#mySelect').change(function() {
    $('.item').hide();
    $('#item' + $(this).val()).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" name="mySelect">
  <option value="0" disabled selected>-- Select your item--</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
</select>

<div class="item" id="item1">
  <p>contents</p>
</div>

<div class="item" id="item2">
  <p>text2</p>
</div>

<div class="item" id="item3">
  <p>text3</p>
</div>

请注意，您将无法选择禁用的option元素，因此在您的.item块尝试这样做时，无需再次显示所有default元素。

带有<select>字段的jQuery切换div

1 个答案: