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>

这有意义吗？

三江源

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

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

1 个答案: