Question

我有点困惑如何填充div，如示例中所示，说我有以下下拉菜单和Div：

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

<div id = 'NewContent'>

</div>

然后是以下JS：

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

我如何将以下内容放入Div：

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

如果用户选择Opt2例如

Answer 1

这就是你想要的吗？

$('select[name="option"]').change(function() {
   if($( "select.foo option:selected").val() == 'Opt2'){
       $('#NewContent').html('<form> \
                              First name: <input type="text" name="firstname"><br> \
                              Last name: <input type="text" name="lastname"> \
                              </form>');
   }
});

Answer 2

这样做：

将您的HTML更改为：

<div style="display:none" id="hold">
    <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    </form>
 <div>

这样做：

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

Answer 3

您可以使用类似以下jQuery的内容来附加表单：

$('select[name="option"]').change(function () {
    if (this.value == 'Opt2') {
        var form = $('#test');
        if (form.length == 0) {
            $('#NewContent').html('<form id="test">First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>');
        }
    }
});

Example

Answer 4

克里斯的解决方案没问题另一种方法是在NewContent div中包含html：

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

然后用css隐藏：

#NewContent form {
    display:none;
}

所以当你点击：

$('select[name="option"]').change(function() {
   $( 'form', '#NewContent').show();
});

如何使用Jquery和Dropdown填充Div

4 个答案: