Question

您好我正在尝试将“儿童”列表项添加到“家庭”列表中。我有一个第一个表单来创建族和第二个表单是一个选择框来创建子项并将它们从选择框添加到选定的族。动态创建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/

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

    });
});

演示：Fiddle

尝试将列表项附加到动态ID

1 个答案: