尝试将列表项追加到动态 id

Trying to appending list items to dynamic id's

本文关键字：动态 id 追加 列表      更新时间：2023-09-26

嗨，我正在尝试将"子"列表项添加到"家庭"列表中。我有一个创建家庭的第一个表单，第二个表单是一个选择框，用于创建孩子并将其添加到选择框中的选定家庭。动态创建 Ol 的 ID，动态创建下拉列表的选项。

创建选项时

，每次创建族和选项时，值都会递增。

我的计划是使用选项引用 OL 系列，在创建时基本上对应于该系列。

例如，当我创建一个 family1 时，将创建一个值为 1 的 family1 选项，当创建 family2 时，将创建一个值

为 2 的选项 2。

我正在尝试将孩子附加到家庭中，但我不知道如何引用 OL 的 ID

这就是我到目前为止所拥有的

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
    var i = 1;
    $(document).on('click', "#submit", function () {
        var str = ' '
        var family = document.getElementById('famname').value;
        $('#family input[type = text],input[type = text],input[type = text],input[type = text]').each(function () {
            str = str + $(this).val() + '  ';
            $(this).val('');
        });
        $("<ol>", {
            text: str,
            id: "family+" + i
        }).appendTo("#container").append($('<button />', {
            'class': 'btn2',
            text: 'Remove'
        }));
        $('#select').append($('<option />', {
            text: family,
            value: i
        }));
        i++;
    });
    // Append items functions
    $(document).on('click', "#submit2", function () {
        var child = prompt("Please enter the child you want to add");
        var e = document.getElementById("select");
        var str = e.options[e.selectedIndex].value;
        $('<li>', {
            text: child
        }).appendTo( ? ? ? ).append($('<button />', {
            'class': 'btn',
            text: 'Remove'
        }))
    });
    //delete items functions 
    $(document).on('click', '.btn', function () {
        $(this).closest('li').remove();
    });
    // delete the list
    $(document).on('click', '.btn2', function () {
        $(this).parent().next().remove();
        $(this).closest('ol').remove();
    });
});
</script>
</head>
<body>

<form id ="family" method = "post" target="_parent">
Enter Family Name <input type = "text" name = "famname" id = "famname" > <br>
Enter Address <input type = "text" name = "address"> <br>
Enter Father's name <input type = "text" name = "dad"> <br>
Enter Mother's name<input type = "text" name = "mom"> <br>
<input id="submit" type="button" value="Submit" name="submit">
</form>
<p>Select Which family you want to add a child to</p>
<form id = "child">
<select id ="select">
</select>
<input id="submit2" type="button" value="Submit" name="submit">
</form>
<div id  = "container">
 </div>
</body>
</html>

感谢提示和帮助

http://jsfiddle.net/Jnewguy/4LVTz/

尝试

$(document).ready(function () {
    var i = 1;
    var $famname = $('#famname');
    var $finputs = $('#family input[type = text]').not('#famname');
    $(document).on('click', "#submit", function () {
        var family = $famname.val();
        var $ol = $("<ol>", {
            id: "family-" + i
        }).appendTo("#container");
        $('<li />', {
            text: family
        }).append($('<button />', {
            'class': 'btn2',
            text: 'Remove'
        })).appendTo($ol);
        $finputs.each(function () {
            $('<li />', {
                text: this.value
            }).appendTo($ol);
            $(this).val('');
        });

        $('#select').append($('<option />', {
            text: family,
            value: i
        }));
        i++;
    });
    // Append items functions
    var $select = $('#select')
    $(document).on('click', "#submit2", function () {
        var child = prompt("Please enter the child you want to add");
        $('<li>', {
            text: child
        }).appendTo('#family-' + $select.val()).append($('<button />', {
            'class': 'btn',
            text: 'Remove'
        }))
    });
    //delete items functions 
    $(document).on('click', '.btn', function () {
        $(this).closest('li').remove();
    });
    // delete the list
    $(document).on('click', '.btn2', function () {
        $(this).parent().next().remove();
        $(this).closest('ol').remove();
    });
});

演示：小提琴

相关文章：