Загрузка различного Div с использованием Ajax в зависимости от опции выбора

Question

Я хочу создать контактную страницу, которая имеет поле выбора сверху и снизу div, содержащего стандартную форму.

Однако, когда пользователь выбирает другую опцию, div, содержащий форму, изменяется на другую форму.

Что-то вроде этого:

<select> 
    <option value="form1">Initial Form</option> 
    <option value="form2">Form 2</option> 
    <option value="form3">Form 3</option> 
    <option value="form4">Form 4</option> 
</select> 


<div class="contactFormContainer"> 
    Initial Form Here 
</div> 

Затем на внешнюю страницу со всеми формами я предполагаю, что это будет выглядеть следующим образом.

<div class="form1">FORM content 1</div> 
<div class="form2">FORM content 2</div> 
<div class="form3">FORM content 3</div> 
<div class="form4">FORM content 4</div> 

В этом смысл?

Thankyou

Answer 1

Вы можете использовать $.load для загрузки только element требуется от отдельного html страницы в div, как показано ниже.

$('select').on('change',function(){ 
    var value=$(this).val(); //value would be form1, form2, form3 etc., 
    var url="yourhtmlpagename.html ."+value; 
    $(".contactFormContainer").load(url,function(){ 
     //anything you want to do after form is loaded 
    }) 
});