在jQuery中使用带有下拉菜单的Switch，不起作用答案

【问题标题】：using Switch with dropdown in jQuery, Not working在jQuery中使用带有下拉菜单的Switch，不起作用
【发布时间】：2017-05-19 08:56:23
【问题描述】：

我正在尝试使用switch 而不是if/else condition 在下拉菜单中选择选项时显示和隐藏一些html 元素。有一个小提琴。请帮帮我。

HTML

<body>

    <select id='purpose'>
      <option value="0">Personal use</option>
      <option value="1">Business use</option>
      <option value="2">Passing on to a client</option>
      <option value="3">xyz</option>
      <option value="4">pqr</option>
    </select>

    <div class="test">

        <div id='business1'>Business Name 1<br/>&nbsp;</div>
        <div id='business2'>Business Name 2<br/>&nbsp;</div>
        <div id='business3'>Business Name 3<br/>&nbsp;</div>
        <div id='business4'>Business Name 4<br/>&nbsp;</div>

    </div>
</body>

jQuery

$(".test > div").hide();
switch($('#purpose option:selected').val){
    case '1': 
        $("#business1").toggle(this.value == '1');
        break;   
    case '2': 
        $("#business2").toggle(this.value == '2');
        break; 
    case '3': 
      $("#business3").toggle(this.value == '3');
      break; 
    case '4': 
      $("#business4").toggle(this.value == '4');
      break; 
    default:
    //
}

Fiddle is here

【问题讨论】：

标签： jquery switch-statement dropdown

【解决方案1】：

您需要使用添加选择框的更改事件

<select id='purpose' onchange="showdiv(this)">

并在脚本标签内添加此功能。

<script>
    $(".test > div").hide();
    function showdiv(ref){

        switch($(ref).val()){
            case '1':
                $("#business1").toggle();
                break;   
            case '2': 
                $("#business2").toggle();
                break; 
            case '3': 
              $("#business3").toggle();
              break; 
            case '4': 
              $("#business4").toggle();
              break; 
            default:
            //
        }
    }
 </script>

【讨论】：

【解决方案2】：

一些事情：

您没有在 jsFiddle 链接中引用 jQuery 库。如果您检查浏览器的调试控制台，您会看到一个错误，指出 $ 未定义。要使用 jQuery，您必须首先引用 jQuery 库。
您的代码未包含在任何类型的事件处理程序中。这意味着它在页面加载时执行一次，仅此而已。由于在页面加载时没有选择任何预期的选项，因此不会显示任何内容。
您没有在代码中执行.val() 函数（您忘记了括号）。
您正在引用 this，它可以在事件处理程序中工作，但在您的代码上下文中，它只是引用整个上下文并且没有“值”。

我已更正here:

$('#purpose').on('change', function() { // wrapped in an event handler
  $(".test > div").hide();
  switch($('#purpose option:selected').val()){ // execute the .val() function
    case '1': 
      $("#business1").toggle(this.value == '1');
      break;   
    case '2': 
      $("#business2").toggle(this.value == '2');
      break; 
    case '3': 
      $("#business3").toggle(this.value == '3');
      break; 
    case '4': 
      $("#business4").toggle(this.value == '4');
      break; 
    default:
  }
});

【讨论】：