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

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 块总是在比较失败时执行。将比较修复为字符串，或将 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 元素，因此无需像您的 default 块尝试那样再次显示所有 .item 元素。