Question

我正在尝试在我的网站上实现这一点。我有一本书清单。它们包括：
1.库克书 2.自动预订
3.裁缝书

现在，对于每本书，我希望用户用价格选择他们想要的页数对于Cook Book，我有：
A. 100到200页：5美元 B. 200至300页：10美元 C. 300至400页：15美元

对于Auto Book，我有：
A. 100到200页：10美元 B. 200到300页：20美元 C. 300至400页：30美元 D. 400到500页：40美元

对于裁缝书，我有： A. 100到200页：10美元 B. 200至300页：15美元 C. 300至400页：20美元 D. 400到500页：25美元

首先，我不知道这是否是在我的HTML页面上实现此功能的最佳解决方案。欢迎更好的解决方案。

其次，我想到的解决方案是创建一个选择框以列出所有类型的书籍，另一个空的选择框将根据所选书籍填充页数和价格。下面是图像插图的链接。 Link to image illustration

但是，这一次仅限于一本书。我希望用户能够一次选择多本书，所以我添加了一个＆＃34;添加更多字段＆＃34;按钮。

当＆＃34;添加更多字段＆＃34;单击按钮，它会显示更多已填充了书籍类型的选择框，并在其旁边显示另一个选择框，该选择框应根据所选书籍的选择自动填充。

现在任何动态创建的＆＃34;书＆＃34;点击选择框，它应自动填充相应的＆＃34;页数和价格＆＃34;选择框。然而，问题在于它并没有停在那里，它还会自动填充所有其他页面＆＃34; no of page＆＃34;也选择框。我需要帮助来解决这个问题。见下图。 Link to image description

以下是代码：

        $(document).ready(function(){
            var cookbook = [
                {display: "100 to 200 pages: $5", value: "5" },
                {display: "200 to 300 pages: $10", value: "10" },
                {display: "300 to 400 pages: $15", value: "15" }];

            var autobook = [
                {display: "100 to 200 pages: $10", value: "10" },
                {display: "200 to 300 pages: $20", value: "20" },
                {display: "300 to 400 pages: $30", value: "30" },
                {display: "400 to 500 pages: $40", value: "40" }];

            var tailoringbook = [
                {display: "100 to 200 pages: $10", value: "10" },
                {display: "200 to 300 pages: $15", value: "15" },
                {display: "300 to 400 pages: $20", value: "20" },
                {display: "400 to 500 pages: $25", value: "25" }];

            var parent_selection=$("#parent_selection");
            var child_selection=$("#child_selection");


            $(parent_selection).change(function(){
                var parent_selection_value=$(this).val();

                switch(parent_selection_value){
                    case 'cookbook': list(cookbook);
                    break;
                    case 'autobook': list(autobook);
                    break;
                    case 'tailoringbook': list(tailoringbook);
                    break;
                    default: $(child_selection).html('');
                    break; 
                }
            });

            //function to populate the child select box
            function list(array_list){
                $(child_selection).html("");
                $(array_list).each(function(i){
                    $(child_selection).append("<option value="+array_list[i].value+">"+array_list[i].display+"</option>");
                });
            }


            //Now to add more select boxes dynamically
            var addButton=$("#addButton");
            $(addButton).click(function (){
               $('div').append("<br>Book: <select class='parent_selection1'>"+
                               "<option value=''>--Please select--</option>"+
                                "<option value='cookbook'>Cook Book</option>"+
                               "<option value='autobook'>Auto Book</option>"+
                                "<option value='tailoringbook'>Tailoring Book</option>"+
                                "</select>"+

                                " No of Pages: "+
                                "<select class='child_selection1'>"+
                                "</select>"
                              ); 
            });

            //Now populating the dependent select boxes dynamically
            $(document).on("change", ".parent_selection1", function(){
                 var parent_selection1_value=$(this).val();

                switch(parent_selection1_value){
                    case 'cookbook': list1(cookbook);
                    break;
                    case 'autobook': list1(autobook);
                    break;
                    case 'tailoringbook': list1(tailoringbook);
                    break;
                    default: $(child_selection1).html('');
                    break; 
                }

            });

            //var child_selection1=$(".child_selection1");
            function list1(array_list){
                $(".child_selection1").html("");
                $(array_list).each(function(i){
                    $(".child_selection1").append("<option value="+array_list[i].value+">"+array_list[i].display+"</option>");
                });
            }


        });
    </script>
</head>
<body>
    <div>
        Book:
        <select id="parent_selection">
            <option value="">--Please select--</option>
            <option value="cookbook">Cook Book</option>
            <option value="autobook">Auto Book</option>
            <option value="tailoringbook">Tailoring Book</option>
        </select>

        No of Pages:
        <select id="child_selection">
        </select>
        <input type="button" value="Add more fields" id="addButton"/>
    </div>
</body>

动态填充动态创建的选择框的问题

0 个答案: