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

这是我在http://jsfiddle.net/me74Z/

工作的小提琴

Answer 1

您正在使用#dropdown，请改用$（this）。

这是小提琴：http://jsfiddle.net/me74Z/6/

代码：

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

});
});

Answer 2

我已经通过多种方式更新了你的小提琴：

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

Answer 3

您没有选择循环中的当前元素。试试这个

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

替换＃＃;＃dropdown＆＃39;这样循环检查当前元素的val而不是第一个。

Answer 4

那是因为你只是检查#dropdown的值。请改用this：

if ($(this).val() == "text") {
    $("#form").append('<input type="text"/>');
} else if ($(this).val() == "note") {
    $("#form").append('<textarea></textarea>');
}

<强> jsFiddle example

注意：正如其他人所提到的，现在是时候使用.on()代替.live()，因为它已在jq 1.9中删除。

Answer 5

您只需使用this即可。这样它就会检查元素的每次迭代并相应地检查它自己的值（this）。

DEMO http://jsfiddle.net/me74Z/4/

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

根据下拉列表中的选项添加元素

5 个答案: