用JS显示动态内容

时间:2014-04-11 10:44:24

标签: javascript php jquery html

当用户选择下拉列表时,我在页面上有一个下拉列表 - 我需要在下面生成不同的表单,例如:

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

添加如上所示的表单?

4 个答案:

答案 0 :(得分:1)

尝试这种方式:Fiddle link

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

答案 1 :(得分:0)

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

有更多信息here

答案 2 :(得分:0)

您可以使用 .change() 事件:

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

<强> Fiddle Demo

答案 3 :(得分:0)

正如你在帖子中提到的那样:

我需要在

下面制作另一种形式
$('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>

Fiddle