Jquery 根据选择选项，使用Ajax加载不同的Div

我想创建一个联系人页面，在包含标准表单的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>

表单内容1
表格内容2
表格内容3
表格内容4

这有什么意义吗

谢谢

您可以使用仅将

元素

从单独的

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
    })
});

---

是什么阻止了您创建它？或者您可以使用选项卡。为什么要使用ajax？只需获取必须存储在上述所有div中的所有数据，一次显示一个div并隐藏其余3个div