在jQuery中使用带下拉菜单的开关，不起作用

我试图通过使用switch而不是if/else条件来显示和隐藏下拉列表中选择选项时的一些html元素。有一把小提琴。请帮帮我

HTML

---

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

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

有几件事：

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

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

$('#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:
  }
});