Question

我试图有条件地在下拉列表中的选定值上显示某些内容。这是一个示例，显然不起作用：

HTML：

<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上时，我需要它来读取加载的选定状态。因此，如果HTML选中了选项1，则id = aa1应该自动显示，如果我将其更改为另一个选项，即使该新选择的选项将被“选中”，它也应该隐藏。因此，我无法在所选项目上显示任何div，因为它将始终显示，因为它将始终被选中。它需要以某种方式进行（例如，当选择value（1）的选项时，请执行此操作；如果选择了value（2），则再进行其他操作，等等。

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

先谢谢大家

Answer 1

Updated fiddle 。

您可以在创建后立即触发事件，例如：

$("#sel").on("change", function() {
  ...
}).trigger('change');
//Or
}).change();

Answer 2

如评论中所述，您可以使用trigger()使事件监听器在页面加载时执行。

您还可以使用映射来减少if或将逻辑切换为简单的语句。

var $selectionDisplays = $('.selectionDisplay');

$('#sel').on('change', function(e) {
  var valueMap = {
    '1': 'aa1'
    , '2': 'bb1'
    , '3': 'cc1'
  };
  var idToShow = valueMap[e.target.value];

  $selectionDisplays.hide();
  
  if (idToShow) $selectionDisplays.filter('#'+ idToShow).show();
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel">
  <option value="1" selected>aa</option>
  <option value="2">bb</option>
  <option value="3">cc</option>
</select>

<div id="aa1" class="selectionDisplay">aa</div>
<div id="bb1" class="selectionDisplay">bb</div>
<div id="cc1" class="selectionDisplay">cc</div>

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

2 个答案: