小编mva*_*pen的帖子

jQuery 使用 <select> 字段切换 div

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

好的,让我们切入正题。我正在尝试创建一个选择字段,根据状态切换不同的 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;
    }
  });
});
Run Code Online (Sandbox Code Playgroud)
<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 …
Run Code Online (Sandbox Code Playgroud)

jquery switch-statement

1
推荐指数
1
解决办法
35
查看次数

标签 统计

jquery ×1

switch-statement ×1