Why div not show/hide on select options in jQuery

Question

I need to hide a specific div when I select an option from select drop-down.
For example
When document load no div will show
When we select 1 option then OneLevel will show
When we select 2 option then TwoLevel will show
When we select 1 option then ThreeLevel will show

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

You can't write id like this "Level OneLevel". You can write in class like that. — Basanta Matia, Mar 17 '17 at 07:01
If id contains spaces, it is not legal HTML. You shouldn't expect this to work. Here is the relevant section of the HTML 4.01 specification. http://www.w3.org/TR/html401/types.html#type-name — Karan Singh, Mar 17 '17 at 07:05

Rajesh · Answer 1 · 2017-03-17T09:13:56.930

2

You do not need switch case. You can use index position and toggle visibility accordingly.

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

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

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

edited Mar 17 '17 at 09:13

answered Mar 17 '17 at 07:08

Rajesh

24,354
5
48
79

Thanks for right answer. Its working fiine. Only one issue is that when i select first option "Select" then it show 3rd div. – Sunil Kumar Mar 17 '17 at 09:04
@SunilKumar Thanks for pointing it out. Have rectified it. :-) – Rajesh Mar 17 '17 at 09:14
I use this code and now its working - `function WorkflowLevel(obj) { var selected = $("option:selected", obj).index(); if(selected==0) $(".Level").hide(); else $(".Level").hide().eq(selected-1).show(); }` – Sunil Kumar Mar 17 '17 at 09:17

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

I don't think multiple ID is possible for one element, you should use class="level" and id on number like id="OneLevel" or just id="One" and in your hide/show selector use something like $(".level#One").hide();

For more details on multiple id: Can an html element have multiple ids?

edited May 23 '17 at 10:30

Community

1
1

answered Mar 17 '17 at 07:04

Adrian Rios

44
7

score 0 · Answer 3 · edited Jun 10 '22 at 08:01

There are few defects in both the html & js It is awkward when you write id as id="Level OneLevel" .id need to be unique.

Use Level as common class . Use this class to hide all the div #Level#TwoLevel & etc is wrong. There is no DOM element with id this

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

Why have you not made a snippet? Assuming you have specifically not made one. — Rajesh, Mar 17 '17 at 07:12

score 0 · Answer 4 · answered Mar 17 '17 at 07:07

Here's an example of how to write it with significantly less painful rewriting. We use custom attribute called showId to show the proper box by matching it up with the .val() of our WorkFlowLevel selection. It will make it a lot easier to add more items.

$("#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>

score 0 · Answer 5 · answered Mar 17 '17 at 07:08

You can't give same id to multiple divs, these should be unique. Use class instead, below is am example.

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

score 0 · Answer 6 · answered Mar 17 '17 at 07:09

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

$("#WorkflowLevel").change(function() {
  $(".Level").hide();

  var id = $("option:selected", this).val()

  $(".Level").filter(function() {

    return $(this).attr("data-id") == id;
  }).show()
})

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

Add data-attribute that corresponds to the value of options
Change ID to Class of div Level ID should be unique
Use filter to select the div that has data attribute equal to option selected value

Why div not show/hide on select options in jQuery

6 Answers6