javascript - 根据下拉列表中的选择附加元素

Question

我试图根据下拉菜单中的选择创建多个字段，但是当我从选项中选择时，它只考虑第一个下拉菜单，因此，如果我创建 3 个具有不同值的字段，它只会采用第一个字段 3 次

这是我当前使用的函数

<button id="addInput">Add Another Field</button>

<div id="inputDiv">
    <p>
        <select id = "dropdown">
            <option value="null"></option>
            <option value="text">Text</option>
            <option value="note">Note</option>
        </select>
    </p>
</div>
<button id="submit">submit</button>
<div id="form"></div>

jQuery

$('#submit').live('click', function() {
  $("select").each(function() {
    if($('#dropdown').val() == "text"){
      $("#form").append('<input type="text"/>');
    }
    else if($('#dropdown').val() == "note"){
      $("#form").append('<textarea></textarea>');
    }
  });
});

这是我正在制作的 fiddle http://jsfiddle.net/me74Z/

Answer 1

我通过多种方式更新了你的 fiddle :

• 使用$(this).val() - 这就是您问题的实际答案
• 使用 remInput 的类- 你不应该有多个具有相同 id 的元素
• 使用on而不是已弃用的 live
• 使用switch为了便于阅读
• 使用closest在删除代码中，如果所有内容都包含在另一个 <p> 中，则使您的代码正常工作

http://jsfiddle.net/LucasTrz/me74Z/8/

$('#addInput').on('click', function() {
    $('#inputDiv').append('<p> <select> <option value="null"></option> <option value="text">Text</option> <option value="note">Note</option> </select> <button class="remInput">Remove</button> </p>');     
});

$(document).on('click', '.remInput', function() { 
    $(this).closest('p').remove();
});

$('#submit').on('click', function() {
    $("select").each(function() {
        switch($(this).val()) {
            case "text":
                $("#form").append('<input type="text"/>');
                break;
            case "note":
                $("#form").append('<textarea></textarea>');
                break;
        }
    });
});