jQuery 切换 div 与 <select> 字段

Question

我已经尝试了大约一个小时来让这段代码正常工作，但这只是在黑暗的地方感到痛苦。

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

$(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() 检索字符串并将其与 switch 中的 int 进行比较，因此 当比较失败时，总是执行 default block 。要修复与字符串的比较，或将 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 元素上放置一个公共(public)类来以更简单的方式实现您的目标，以便您可以在选择时轻松隐藏它们。变化。然后，您可以通过连接所选值来构建 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 元素作为您的 默认 阻止尝试执行的操作。