CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rohit Verma
Rohit Verma

Reputation: 3785

How can I filter div as per selected value from dropdown optionlist?

I have multiple divs the first time it will show all but when I change the value from dropdown options then all div should be hidden and just one div should appear as per selected value.

It's working for one option like as I did for panel-1 but now I want to it should be work for all options list how can I do it?

$('#medicalHistoryFilter').on('change', function() {
  var selectedFitler = $(this).find(':selected').val();

  if (selectedFitler == 'panel-1') {
    $('#accordion').find('.panel').hide();
    $('#accordion').find('#panel-1').parents('.panel').show();
  } else {
    $('#accordion').find('.panel').show();
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <select class="form-control" id="medicalHistoryFilter">
    <option>Filter</option>
    <option value="panel-1">panel-1</option>
    <option value="panel-2">panel-2</option>
    <option value="panel-3">panel-3</option>
    <option value="panel-4">panel-4</option>
    <option value="panel-5">panel-5</option>
  </select>

  <div class="clearfix"></div><br>
  <div class="panel-group" id="accordion">

    <div class="panel panel-default">
      <div id="panel-1">This is panel 1</div>
    </div>

    <div class="panel panel-default">
      <div id="panel-2">This is panel 2</div>
    </div>

    <div class="panel panel-default">
      <div id="panel-3">This is panel 3</div>
    </div>

    <div class="panel panel-default">
      <div id="panel-4">This is panel 4</div>
    </div>

    <div class="panel panel-default">
      <div id="panel-5">This is panel 5</div>
    </div>

  </div>
</div>

Option list may be multi there is no limit so we can't do it with if else condition.

Upvotes: 1

Views: 1307

Answers (1)

Zenoo
Zenoo

Reputation: 12880

You can select the correct panel with $('#'+selectedFitler).

PS: I also edited your code a bit:

To get your <select> value, just use $(this).val().
No need to use a .find() method, you can just select all your panels with $('#accordion .panel').

$('#medicalHistoryFilter').on('change', function() {
  let selectedFitler = $(this).val();
  if (selectedFitler.startsWith('panel-')) {
    $('#accordion .panel').hide();
    $('#' + selectedFitler).parent().show();
  } else {
    $('#accordion .panel').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="medicalHistoryFilter">
  <option>Filter</option>
  <option value="panel-1">panel-1</option>
  <option value="panel-2">panel-2</option>
  <option value="panel-3">panel-3</option>
  <option value="panel-4">panel-4</option>
  <option value="panel-5">panel-5</option>
</select>

<div class="panel-group" id="accordion">

  <div class="panel panel-default">
    <div id="panel-1">This is panel 1</div>
  </div>

  <div class="panel panel-default">
    <div id="panel-2">This is panel 2</div>
  </div>

  <div class="panel panel-default">
    <div id="panel-3">This is panel 3</div>
  </div>

  <div class="panel panel-default">
    <div id="panel-4">This is panel 4</div>
  </div>

  <div class="panel panel-default">
    <div id="panel-5">This is panel 5</div>
  </div>
</div>

Upvotes: 4

Related Questions