使用JS顯示動態內容

Question

當用戶選擇一個下拉菜單時，我在Page上有一個下拉列表，如下所示-我需要在下面生成其他表單：

<div id = 'drop'>
    <select name = 'option'>
        <option>Opt1</option>
        <option>Opt2</option>
        <option>Opt3</option>
    </select>
</div>

<div id = 'NewContent'>
   //I need different content here depending on selection
</div>

如何為用戶選擇的每個不同選項將不同的表單加載到新的Content div中？

擴展這個問題，說我有一個表格：

<form id ='TestForm'>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

我將如何使用：

$('select[name="option"]').change(function() {
   $('#NewContent').html(this.value);
});

添加如上所述的形式？

Answer 1

嘗試這種方式： 小提琴鏈接

<div id = 'drop'>
    <select name = 'option'>
        <option value="form1">Opt1</option>
        <option value="form2">Opt2</option>
        <option value="form3">Opt3</option>
    </select>
</div>

<div id = 'NewContent'>
   //I need different content here depending on selection
   <div id="form1" style="display:none">Form1</div>
   <div id="form2"style="display:none">Form2</div>
   <div id="form3"style="display:none">Form3</div>
</div>

$('select[name="option"]').change(function() {
    $('#NewContent').find('*').hide();
   $('#'+$(this).val()).show();
});

Answer 2

您可以使用$('#NewContent').html('Some New Content'); 使用JQuery更改內容

可在此處獲得更多信息。

Answer 3

您可以使用.change（）事件：

$('select[name="option"]').change(function() {
   $('#NewContent').html(this.value);
});

小提琴演示

Answer 4

正如您在帖子中提到的：

我需要在下面制作其他表格

$('select[name="option"]').change(function() {
   $('#NewContent').find('#'+this.value).show().siblings('form').hide();
}).change();

並更改表單ID，如下所示：

<form id ='Opt1'>...</form>
<form id ='Opt2'>...</form>
<form id ='Opt3'>...</form>

---

小提琴