0

您好我正在尝试将“儿童”列表项添加到“家庭”列表中。我有第一个表单来创建家庭，第二个表单是一个选择框，用于创建孩子并将它们从选择框中添加到选定的家庭中。Ol 的 id 是动态创建的，下拉选项是动态创建的。

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

我的计划是通过使用选项来引用OL族，基本上对应于创建时的族。

例如，当我创建一个family1时，将使用该family1创建一个值为1的选项，当创建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/

4

1 回答 1

1

尝试

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

    });
});

演示：小提琴

于 2013-10-10T04:53:39.023 回答