访问条件视图下拉列表的选定状态

我试图在下拉列表中有条件地显示所选值上的内容。下面是一个明显不起作用的例子:

<select id="sel">
    <option value="1" selected>aa</option>
    <option value="2">bb</option>
    <option value="3">cc</option>
</select>

<div id="aa1">aa</div>
<div id="bb1">bb</div>
<div id="cc1">cc</div>

jQuery查询:

$("#aa1, #bb1, #cc1").hide();

$('#sel').change(function(){
   var r = $(this).val().is(":selected");

   switch(r) {
     case '1':
       $("#aa1").show();
       break;
     case '2':
       $("#bb1").show();
       break;
     case '3':
       $("#cc1").show();
       break;
     default:
       $("#aa1, #bb1, #cc1").hide();
       break;
   }   
});

这是一个 fiddle 也

$("#sel").on("change", function(){
    var r = $(this).val();
    if(r == "1"){
        $("#aa1").show();
    }else{
        $("#aa1").hide();
    }
});

问题是,它只对更改事件起作用(正如您在代码中看到的),当它加载到DOM上时,我需要它读取加载的selected状态。因此,如果HTML选择了选项1,id=aa1应该会自动显示,如果我将它更改为另一个选项,它应该隐藏,即使新选择的选项将是“selected”。所以我不能在一个选中的项目上显示任何div,因为它会一直显示,因为一个总是被选中的。它需要以某种方式(即,当选择值(1)选项时,执行此操作,如果选择值(2),则执行其他操作,等等。

我宁愿使用case语句,因为我有几个选项和几个视图。

提前谢谢伙计们