Question

当我从选择下拉列表中选择一个选项时，我需要隐藏一个特定的div 例如
当文件加载时没有div会显示
当我们选择1个选项时，OneLevel将显示
当我们选择2选项时，TwoLevel将显示
当我们选择1个选项时，ThreeLevel将显示

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#Level").hide();
function WorkflowLevel(obj) {
    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;

     $("#Level").hide();

    switch (selected) {
    case '0':
        $("#Level").hide();
        break;
    case '1':
        $("#Level").hide();
        $("#Level#OneLevel").show();
        break;
    case '2':
        $("#Level").hide();
        $("#Level#TwoLevel").show();
        break;
    case '3':
        $("#Level").hide();
        $("#Level#ThreeLevel").show();
        break;
    }

}
</script>
</head>
<body>

<select id="WorkflowLevel" class="form-control" name="show_text_area" onchange="WorkflowLevel(this)">
    <option value="0">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<div id="Level OneLevel">1</div>
<div id="Level TwoLevel">2</div>
<div id="Level ThreeLevel">3</div>

</body>
</html>

Answer 1

您不需要switch个案。您可以使用索引位置并相应地切换可见性。

＆＃13;

$(".Level").hide();

function WorkflowLevel(obj) {
  var selected = $("option:selected", obj).index();
  $(".Level").hide();
  selected && $(".Level:eq(" + (selected - 1) + ")").show();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="WorkflowLevel" class="form-control" name="show_text_area" onchange="WorkflowLevel(this)">
  <option value="0">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div class="Level OneLevel">1</div>
<div class="Level TwoLevel">2</div>
<div class="Level ThreeLevel">3</div>

＆＃13;

Answer 2

我不认为一个元素可能有多个ID，你应该使用class =＆＃34; level＆＃34;和ID在id =＆＃34; OneLevel＆＃34;或者只是id =＆＃34; One＆＃34;并在你的隐藏/显示选择器中使用类似$（＆＃34; .level＃One＆＃34;）。hide（）;

有关多个ID的详细信息：Can an html element have multiple ids?

Answer 3

html＆amp; amp; JS 当您将ID编为id="Level OneLevel"时，这很尴尬。id需要是唯一的。

使用Level作为公共类。使用此类隐藏所有div #Level#TwoLevel＆amp;等错了。这个

没有id的DOM元素

<强> JS

    $(".Level").hide();

    function WorkflowLevel(obj) {
      var selectBox = obj;
      var selected = selectBox.options[selectBox.selectedIndex].value;

      $(".Level").hide();

      switch (selected) {
        case '0':
          $(".Level").hide();


    break;
    case '1':
      $(".Level").hide();
      $("#OneLevel").show();
      break;
    case '2':
      $(".Level").hide();
      $("#TwoLevel").show();
      break;
    case '3':
      $(".Level").hide();
      $("#ThreeLevel").show();
      break;
  }

}

<强> HTML

<div id="OneLevel" class="Level">1</div>
<div id="TwoLevel"  class="Level">2</div>
<div id="ThreeLevel"  class="Level">3</div>

DEMO

Answer 4

这是一个如何编写它的示例，其重写效果明显减少。我们使用名为showId的自定义属性，通过将其与.val()选项的WorkFlowLevel进行匹配来显示正确的框。这将使添加更多项目变得更加容易。

$("#WorkflowLevel").change(function () {
  $(".Level").hide()
  $("[showId="+$(this).val()+"]").show();
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="WorkflowLevel" class="form-control" name="show_text_area">
    <option value="0">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<div class="Level" showId="1">1</div>
<div class="Level" showId="2">2</div>
<div class="Level" showId="3">3</div>

Answer 5

您不能将同一个id提供给多个div，这些div应该是唯一的。请改用class，以下是示例。

$(document).ready(function(){
$(".lvl").hide();
  $("#WorkflowLevel").on('change', function(){
    $(".lvl").hide();
    $("#Level"+$(this).val()).show();
  })
  
})

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<select id="WorkflowLevel" class="form-control" name="show_text_area" >
    <option value="0">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<div id="Level1" class="lvl">1</div>
<div id="Level2" class="lvl">2</div>
<div id="Level3" class="lvl">3</div>

Answer 6

＆＃13;

$(".Level").hide();

$("#WorkflowLevel").change(function() {
  $(".Level").hide();

  var id = $("option:selected", this).val()

  $(".Level").filter(function() {

    return $(this).attr("data-id") == id;
  }).show()
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="WorkflowLevel" class="form-control" name="show_text_area">
    <option value="0">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<div class="Level OneLevel" data-id="1">1</div>
<div class="Level TwoLevel" data-id="2">2</div>
<div class="Level ThreeLevel" data-id="3">3</div>

＆＃13;

添加与选项值
将ID更改为div Class的{{1}} ID应该是唯一的
使用过滤器选择数据属性等于选项选择值

为什么div不显示/隐藏jQuery中的select选项

6 个答案: