Question

我是javascript的新手，几乎没有使用jquery的经验。以下允许您为多个候选人重复一个表单，其中大部分工作正常但是我需要帮助将下面的选择列表附加到相关行，并且删除按钮此时不会删除每个选择列表：

   <html>
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script>
            (function($) {
                $newcountForms = 1;
                $.fn.newaddForms = function() {
                    var newform = "<table>" + "<tr>" + "<td>First Name: <input type='text' name='FirstName[" + $newcountForms + "]'></td>" + "<td>Last Name: <input type='text' name='LastName[" + $newcountForms + "]'></td>" + "<td>Sex:</td><td> <input type='radio' name='Sex[" + $newcountForms + "]' value='Male'>Male<br>" + "<input type='radio' name='Sex[" + $newcountForms + "]' value='Female'>Female</td>" + "<td><button>remove</button></td>" + "</tr>" + "</table>";

                    newform1 = $("<div>" + newform + "</div>");

                    $("button", $(newform1)).click(function() {
                        $(this).parent().parent().remove();
                    });

                    $(this).append(newform1);

                    var s = $('<select/>');
                    var o = [1, 2, 3];
                    for (var i in o) {
                        s.append($('<option/>').html(o[i]));
                    }
                    $("button", $(s)).click(function() {
                        $(this).parent().parent().remove();
                    });

                    $(this).append(s);

                    $newcountForms++;
                };
            })(jQuery);

            $(function() {
                $("#newbutton").bind("click", function() {
                    $("#newcands").newaddForms();
                });
            });

        </script>
     </head>
    <body>
        <!-- Button For New Candidates -->
        <button id="newbutton">
            New Candidate
        </button>

        <form>
            <p>
                <div id="newcands"></div>
            </p>
        </form>
    </body>
   </html>

Answer 1

在newForm1中添加select

+"<td><select>"+s.html()+"</select></td>"+

     $("button", $(newform1)).click(function () {
        $(this).closest('table').remove();
     });

DEMO

带有选择列表的动态JavaScript表单

1 个答案: