Load image on select option change

Question

I have 2 dropdowns

pickup location and drop location

When I click on pickup location image should load and display. When I select drop location the image should display on the side of pick-up location image. That is image should display side by side.

index.php

<div class="col-md-2" style="color: #000; font-family:Titillium Web">
     <span style="color: #fff"> Pickup Location * </span>
         <?php
             $con = mysqli_connect('localhost','root','');
             mysqli_select_db($con,'demo');

             $sql="SELECT pickup_loc FROM location";
             $result=mysqli_query($con,$sql);

              echo "<select class='selectpicker1' id='colorselector' name='pickup_loc' >";
              while ($row=mysqli_fetch_array($result)) {
                  # code...
                  echo "<option value='".$row['pickup_loc']."'>" .$row['pickup_loc'] ."</option>";
              }

              echo "</select>";
         ?>                      
     </div>
    <div class="col-md-2 text-center">
        <br><input type="text" id="pwr1" class="required p-control" name="pickup_ward"/>  
    </div>

    <div class="col-md-2" style="color: #000; font-family:Titillium Web "> 
        <span style="color: #fff">  Drop Location *</span>
            <?php
                $con = mysqli_connect('localhost','root','');
                mysqli_select_db($con,'demo');

                $sql="SELECT drop_loc FROM location";
                $result=mysqli_query($con,$sql);

                echo "<select class='selectpicker2' id='dropselector' name='drop_loc' >";
                while ($row=mysqli_fetch_array($result)) {
                    # code...
                    echo "<option value='".$row['drop_loc']."'>" .$row['drop_loc'] ."</option>";
                }

                echo "</select>";
            ?>                         
    </div>
    <div class="container show-image output">
  <div id="Floor1" class="colors Floor1">  
      <img src="images/flor1.jpg" style="width: 100%" class="img-responsive" /> 
  </div>

   <div id="Floor2" class="colors Floor2"> 
       <img src="images/flor2.jpg"  style="width: 100%" class="img-responsive" /> 
   </div>
</div>

index.js

    $(function() {
  $('#colorselector').change(function(){
    $('.colors').hide();
    $('#' + $(this).val()).show();
  });


  $('#dropselector').change(function(){
    $('.colors').hide();
    $('#' + $(this).val()).show();
  });
});

Answer 1

Do you mean something like this?

 $('#colorselector, #dropselector').change(function() { var select = $(this); $('.' + select.attr("id") + ' .colors').hide(); $('#' + select.val()).show(); }); 

 .colors { display: none; } select option:first-child { display: none; } .colors img { max-width: 150px; } .container { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-2" style="color: #000; font-family:Titillium Web"> <span style="color: #fff"> Pickup Location * </span> <select class='selectpicker1' id='colorselector' name='pickup_loc'> <option value=''></option> <option value='Building1'>Building1</option> <option value='Building2'>Building2</option> </select> </div> <div class="col-md-2 text-center"> <br> <input type="text" id="pwr1" class="required p-control" name="pickup_ward" /> </div> <div class="col-md-2" style="color: #000; font-family:Titillium Web "> <span style="color: #fff"> Drop Location *</span> <select class='selectpicker2' id='dropselector' name='drop_loc'> <option value=''></option> <option value='Floor1'>Floor1</option> <option value='Floor2'>Floor2</option> </select> </div> <div class="container colorselector show-image output"> <div id="Building1" class="colors Building2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWb3sciAdSaUG1Up0xz9facEB2bWr_OPZG6jNzHaQKcmwDBTB2iA" style="width: 100%" class="img-responsive" /> </div> <div id="Building2" class="colors Building2"> <img src="https://cdn.vox-cdn.com/thumbor/MJguYcgKkDes6NzbE8Y0OgdyF64=/0x0:1500x974/1200x800/filters:focal(630x367:870x607)/cdn.vox-cdn.com/uploads/chorus_image/image/56258041/2401_Third_Ave.0.jpg" style="width: 100%" class="img-responsive" /> </div> </div> <div class="container dropselector show-image output"> <div id="Floor1" class="colors Floor1"> <img src="https://images.mydoorsign.com/img/lg/S/1-floor-number-braille-sign-se-6089.png" style="width: 100%" class="img-responsive" /> </div> <div id="Floor2" class="colors Floor2"> <img src="https://images.mydoorsign.com/img/lg/S/2-floor-number-braille-sign-se-6090.png" style="width: 100%" class="img-responsive" /> </div> </div>