根据下拉菜单中的选择追加一个元素

Appending an element based on choice from a dropdown

本文关键字：一个 元素 追加 下拉菜单 选择      更新时间：2023-09-26

我正在尝试创建基于从下拉菜单选择的多个字段，但当我从选项中选择时，它只考虑到第一个下拉菜单，所以如果我创建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/

我已经用几种方法更新了你的小提琴:

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

如果您正在使用#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>');
    }
});
});

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

$('#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'替换为this，循环将检查当前元素的val而不是第一个。

这是因为您只检查#dropdown的值。使用this代替:

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

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

您只需要使用this。这样，它检查元素的每次迭代，并相应地检查它自己的值(this)。

演示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>');
        }
    });
});
相关文章：