Skip to content
Logo IT Avans

PODWÓJNY SELECT Z WYKORZYSTANIEM JQUERY – ONCHANGE EVENT.

Webmaster

21 grudnia 2015

Poniżej znajduje się przykładowa implementacja funkcjonalności polegającej na automatycznym pojawianiu się zawartości selecta w zalezności od wartości innego selecta:

js-select-onchange

Tablica powiatów:

Array ( [2] => buski [1] => grodzki - M. Kielce [3] => jędrzejowski [4] => kazimierski)

Tablica gmin:

Array ( [1] => Array ( [0] => Array ( [102] => Miasto Kielce ) ) [2] => Array ( [0] => Array ( [1] => Busko-Zdrój ) [1] => Array ( [7] => Gnojno ) [2] => Array ( [4] => Nowy Korczyn ) [3] => Array ( [3] => Pacanów ) [4] => Array ( [6] => Solec-Zdrój ) [5] => Array ( [2] => Stopnica ) [6] => Array ( [8] => Tuczępy ) [7] => Array ( [5] => Wiślica ) ) [3] => Array ( [0] => Array ( [16] => Imielno ) [1] => Array ( [9] => Jędrzejów ) [2] => Array ( [11] => Małogoszcz ) [3] => Array ( [14] => Nagłowice ) [4] => Array ( [15] => Oksa ) [5] => Array ( [10] => Sędziszów ) [6] => Array ( [17] => Słupia ) [7] => Array ( [12] => Sobków ) [8] => Array ( [13] => Wodzisław ) ))

Kod html oraz php:

            <select name="form_gt[GT_Powiaty_id]" id="powiat_id">
              <option value='0'>wybierz</option>
               <?php
                foreach($powiaty as $k_powiat=>$v_powiat):
                  echo sprintf("<option value='%s' %s>%s</option>", $k_powiat, ($k_powiat == $obiekt_turystyczny['GT_Powiaty_id'])? ' selected ': '', $v_powiat);
                endforeach;
               ?>            
          </select>

          <select name="form_gt[GT_Gminy_id]" id="GT_Gminy_id">
             <?php
              echo "<option value='0'>-</option>";
              if(isset($obiekt_turystyczny['GT_Powiaty_id']) and $obiekt_turystyczny['GT_Powiaty_id']>0) {
                foreach($gminy[$obiekt_turystyczny['GT_Powiaty_id']] as $gmina) {
                  echo sprintf("<option value='%s' %s>%s</option>", key($gmina), (key($gmina)== $obiekt_turystyczny['GT_Gminy_id'])? ' selected ': '', $gmina[key($gmina)]);
                }
              }
             ?>
          </select>

Kod javascript oraz jQuery:

<script type="text/javascript">
  jQuery(document).ready(function() {
    var gminy_json = <?php echo json_encode($gminy); ?>;

    jQuery("#powiat_id").change(function() {
      var mainCat=jQuery("#powiat_id").val();

      jQuery("#GT_Gminy_id").empty();
      var object_key = 0;
        if(gminy_json.hasOwnProperty(mainCat)) {
          jQuery("#GT_Gminy_id").append('<option value="0">wybierz</option>');
          var ilosc_gmin_dla_powiatu=gminy_json[mainCat].length;

          for(var i=0; i<(ilosc_gmin_dla_powiatu); i++){
            object_key = Object.keys(gminy_json[mainCat][i]);
            jQuery("#GT_Gminy_id").append('<option value="' + object_key + '">' + gminy_json[mainCat][i][object_key] +'</option>');
          }

        } else {
          jQuery("#GT_Gminy_id").append('<option value="0">-</option>');
        }
      });
    });
</script>