CODEWITHSUNDEEP
jquerylistfilterdropdown
retArdos
retArdos

Reputation: 135

filter two dropdown list with jQuery

I have two lists who looks like this.

<select class="form-control" id="arrondissement" required="required" aria-invalid="false" name="arrondissement">
  <option value="1">1er arrondissement</option>
  <option value="2"><span>2ème arrondissement</span></option>
  <option value="3"><span>3ème arrondissement</span></option>
  <option value="4"><span>4ème arrondissement</span></option>
  <option value="5"><span>5ème arrondissement</span></option>
</select>

<select class="form-control classeNomIgh" id="nomIGH" required="required" aria-invalid="false" name="nomIGH">
  <!-- remplacer les valeurs "précodées" ('eiffel', 'montparnasse', 'tgi') par la liste des valeurs renvoyées par l'appel au WebService -->
  <option value="" label="---">---</option>
  <option data-arrondissement="1" value="IGH1">IGH1</option>
  <option data-arrondissement="2" value="IGH2">IGH2</option>
  <option data-arrondissement="3" value="IGH3">IGH3</option>
  <option data-arrondissement="4" value="IGH4">IGH4</option>
  <option data-arrondissement="5" value="IGH5">IGH5</option>
</select>

How can i do so that when i select an 'arrondissement' in the first drowdown list, the second will display only those with data-arrondissement with the same value.

Upvotes: 0

Views: 1156

Answers (3)

Tejas Soni
Tejas Soni

Reputation: 551

This will help you using jquery change event

$( "#arrondissement" ).change(function() {

    var conceptName = $('#arrondissement').find(":selected").val();
    $("#nomIGH > option").each(function() {
        if(jQuery(this).attr('data-arrondissement') == conceptName){
          $("#nomIGH option[data-arrondissement='"+conceptName+"']").prop('selected', true);
        }
    });
});

https://jsfiddle.net/7hgw8h69/

Upvotes: 1

Karan Mehta
Karan Mehta

Reputation: 415

I think This Will help You

$(function(){
    $('#groups').on('change', function(){
        var val = $(this).val();
        var sub = $('#sub_groups');
        $('option', sub).filter(function(){
            if (
                 $(this).attr('data-group') === val 
              || $(this).attr('data-group') === 'SHOW'
            ) {
              if ($(this).parent('span').length) {
                $(this).unwrap();
              }
            } else {
              if (!$(this).parent('span').length) {
                $(this).wrap( "<span>" ).parent().hide();
              }
            }
        });
    });
    $('#groups').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="groups">
    <option value='1'>1er arrondissement</option>
    <option value='2'>2ème arrondissement</option>
    <option value='3'>3ème arrondissement</option>
    <option value='4'>4ème arrondissement</option>
    <option value='5'>5ème arrondissement</option>
<select>
    
<select id="sub_groups">
    <option data-group='SHOW' value='0'>-- Select --</option>
    <option data-group='1' value='IGH1'>IGH1</option>
    <option data-group='2' value='IGH2'>IGH2</option>
    <option data-group='3' value='IGH3'>IGH3</option>
    <option data-group='4' value='IGH4'>IGH4</option>
    <option data-group='5' value='IGH5'>IGH5</option>
    <select>

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12161

Here you go with a solution

$('#arrondissement').change(function(){
  $('#nomIGH').find('option[data-arrondissement=' + $(this).find('option:selected').val() +']').attr('selected', 'selected');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="arrondissement" required="required" aria-invalid="false" name="arrondissement">
  <option value="1">1er arrondissement</option>
  <option value="2"><span>2ème arrondissement</span></option>
  <option value="3"><span>3ème arrondissement</span></option>
  <option value="4"><span>4ème arrondissement</span></option>
  <option value="5"><span>5ème arrondissement</span></option>
</select>

<select class="form-control classeNomIgh" id="nomIGH" required="required" aria-invalid="false" name="nomIGH">
  <!-- remplacer les valeurs "précodées" ('eiffel', 'montparnasse', 'tgi') par la liste des valeurs renvoyées par l'appel au WebService -->
  <option value="" label="---">---</option>
  <option data-arrondissement="1" value="IGH1">IGH1</option>
  <option data-arrondissement="2" value="IGH2">IGH2</option>
  <option data-arrondissement="3" value="IGH3">IGH3</option>
  <option data-arrondissement="4" value="IGH4">IGH4</option>
  <option data-arrondissement="5" value="IGH5">IGH5</option>
</select>

Hope this will help you.

Upvotes: 1

Related Questions