Обновить содержимое php onchange <select>

Question

Я создаю форму с тремя основными полями и несколькими дополнительными полями. Одним из основных полей является тип выбора, а также некоторые дополнительные поля. Значения для всех полей выбора поступают из включенных .php-файлов, которые подключены к базе данных. Моя цель состоит в том, чтобы дополнительные поля отображали только значения, относящиеся к выбору основного поля выбора. Я вижу, что onClick основного выбора я вызову функцию javascript с ajax, которая отправит новое значение на ту же страницу и обновит содержимое основного div (со всеми файлами, включенными в php, которые будут приняты новый параметр и показать необходимые значения)

body 
    div id=container 
    div id=menu 
    div id=main 

Все, что я знаю о том, как AJAX для отправки переменных на другую страницу PHP и получить вторит ответ. Может кто-нибудь объяснить, как отправить/изменить значение переменной php на одной странице при обновлении определенного div. (или может быть кто-то знает лучшее решение для моей проблемы). Спасибо за ваше время!

Answer 1

Допустим, ваш главный выбор, как это:

<select id="main_select"> 
    <option value="car">Cars</option> 
    <!-- other options --> 
</select> 

И у вас есть контейнер, который, как предполагается, чтобы показать детали на основе выбранной опции

<div id="details"> 
    <!-- the details options will be added here --> 
</div> 

у вас есть PHP-файл, который echos детали, основанные на выбранном варианте

<?php 
$mainOption = $_POST['option']; 
details($mainOption); 

function details($opt) 
{ 
    if($opt == 'car') 
     echo '<select class="detail_select"> 
       <option value="bmw">BMW</option> 
       <option value="ferrari">Ferrari</option> 
       <option value="porsche">Porsche</option> 
      </select>'; 
    else if($opt == 'another_option') 
    { 
     echo 'other details'; 
    } 
} 
?> 

И ваш Ajax может быть сом что-то вроде этого:

$(document).ready(function() { 
    $('#main_select').change(function(){ 
     $.ajax({ 
      url: "something.php", 
      type: "post", 
      data: {option: $(this).find("option:selected").val()}, 
      success: function(data){ 
       //adds the echoed response to our container 
       $("#details").html(data); 
      } 
     }); 
    }); 
});