jQuery 使用 <select> 字段切换 div

Question

我已经尝试了大约一个小时才能使此代码正常工作，但这只是在黑暗中的痛苦。

好的，让我们切入正题。我正在尝试创建一个选择字段，根据状态切换不同的 HTML 元素<select>

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

Answer 1

您当前逻辑的问题在于您正在从中检索字符串val()并将其与 中的 int 进行比较switch，因此default在比较失败时始终执行该块。将比较修复为字符串，或将 转换val()为 int。

$(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块尝试那样再次显示所有元素。