jQuery on change dropdown call web service для загрузки параметров

Question

У меня есть форма с выпадающим списком и переменным количеством опций (в виде флажков и текстовых входов).

Что я хочу достичь, это изменить значение выпадающего списка, вызвать веб-сервис и загрузить различные параметры под ним. Я знаю, что я должен использовать событие onchange jQuery, и Ajax загружает разметку в div.

Но как именно я могу это достичь?

Я использую Bootstrap 3, а некоторые из моего кода формы ниже. Однако я не уверен, как написать свою часть Javascript или Ajax.

Выпадающий список

 <div class="form-group"> 
     <label for="inputBranch" class="col-lg-2 control-label">Branch</label> 
     <div class="col-lg-10"> 
      <select class="form-control" id="resBranch"> 
      <?php 
      // print all branch name 
      // if is same as merchantID, mark as selected 
      foreach($branchesArray as $branch) { 
       if($branch['merchantID'] == $merchantID) { 
       echo "<option selected>" . $branch['name'] . "</option>"; 
       } else { 
       echo "<option>" . $branch['name'] . "</option>"; 
       } 
      } 
      ?> 
      </select> 
     </div> 
     </div> 

Опции

 <div class="form-group"> 
     <label for="" class="col-lg-2 control-label">Options</label> 
     <div class="col-lg-10"> 

     <?php 
     foreach ($featuresArray as $feature) { 
     ?> 
      <div class="checkbox"> 
      <label> 
       <input type="checkbox" value="<?php echo $feature['customValue']; ?>"> 
       <?php echo $feature['customValue']; ?> 
      </label> 
      </div> 
     <?php 
     } // end foreach 
     ?> 

     </div> 
     </div> 

Answer 1

Вы можете отправить запрос на Ajax с выбранной опцией формы на веб-службы PHP, который возвращает HTML для добавления к форма. В JS может выглядеть примерно так:

$(document).ready(function() { 
    $('select').change(function() { 
     $.get('ajax.php?option=' + $('select').val(), function(data) { 
      if(data == "error") 
      { 
       //handle error 
      } 
      else { 
       $('div.ajax-form').append(data); //create an element where you want to add 
               //this data 
      } 
     }); 
    }); 
}); 

РНР может выглядеть следующим образом:

if(isset($_GET['option'])) { 
    if($_GET['option'] == 1) 
    { 
     //echo form data for option one here 
    } 

    elseif($_GET['option'] == 2) 
    { 
     //echo form options for option two here 
    } 

    elseif($_GET['option'] == 3) 
    { 
     //echo form options for option two here 
    } 

    //other options here 

    else 
    { 
     echo "error"; //select value not correct 
    } 
}