jquery代码中的错误,用于动态添加html控件

时间:2010-12-23 10:13:09

标签: jquery jquery-selectors

这是我添加html控件的Html和jquery代码  动态。这是我的jquery的一部分  代码(添加儿童控制数  动态)效果很好。但第二个 添加否的部分。婴儿没有  work.What是什么问题。 为什么secong下拉列表不起作用。??????需要帮助

----------------------第一部分----------------------- ---------------------

 <div class="grid_top "><b>
                   No. Of Children
                    <strong>
                    <% = Html.DropDownList("ddlNoOfChildren", new SelectList(new[] { "1", "2", "3", "4", "5", "6" }, ViewData["childs"]), new { id = "ddlNoOfChildren" })%>

                    </strong>

                </b></div>
            <div class="ledger_subtable create_tbl" style="margin:1px 0">
                <table id="Character"  width="100%">
                    <tr>
                        <th>
                            <label>
                                Mr/Mrs/Ms
                            </label>
                        </th>

                        <th>
                            <label>
                                Lastname
                            </label>
                        </th>
                        <th>
                            <label>
                                Firstname
                            </label>
                        </th>
                        <th>
                            <label>
                                Email Id
                            </label>
                        </th>
                        <th>
                            <label>Passport No</label>
                        </th>
                        <th>
                            <label>Nationality</label>
                        </th>
                    </tr>
                    <tr id="trow_0">
                        <td>
                            <% = Html.DropDownList("ddlSalts_0", new SelectList(new[] { "Mr", "Mrs", "Ms" }))%>
                        </td>
                        <td>
                            <%=Html.TextBox("LastName_0")%>
                          <%=Html.ValidationMessage("lastname","*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("FirstName_0")%>
                             <%=Html.ValidationMessage("firstname","*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("EmailId_0")%>
                             <%=Html.ValidationMessage("emailid","*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("PassportNo_0")%>
                            <%=Html.ValidationMessage("passportNo","*")%>
                        </td>

                        <td>
                            <% = Html.DropDownList("ddlNationality_",  new SelectList(new[] { "Nepali", "Foreigner" }), new { id = "ddlNationality_" })%>
                        </td>
                    </tr>
                </table></div>




   <%-- ----------------------- Second part -----------  --%>

 <div class="grid_top "><b>
                   No. Of Infant
                    <strong>
                    <% = Html.DropDownList("ddlNoOfInfants", new SelectList(new[] { "1", "2", "3", "4", "5", "6" }, ViewData["Infants"]), new { id = "ddlNoOfInfants" })%>

                    </strong>

                </b></div>
            <div class="ledger_subtable create_tbl" style="margin:1px 0">
                <table id="character2"  width="100%">
                    <tr>
                        <th>
                            <label>
                                Mr/Mrs/Ms
                            </label>
                        </th>

                        <th>
                            <label>
                                Lastname
                            </label>
                        </th>
                        <th>
                            <label>
                                Firstname
                            </label>
                        </th>
                        <th>
                            <label>
                                Email Id
                            </label>
                        </th>
                        <th>
                            <label>Passport No</label>
                        </th>
                        <th>
                            <label>Nationality</label>
                        </th>
                    </tr>
                    <tr id="trow2_0">
                        <td>
                            <% = Html.DropDownList("ddlSalts2_0", new SelectList(new[] { "Mr", "Mrs", "Ms" }))%>
                        </td>
                        <td>
                            <%=Html.TextBox("LastName2_0")%>
                          <%=Html.ValidationMessage("lastname", "*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("FirstName2_0")%>
                             <%=Html.ValidationMessage("firstname", "*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("EmailId2_0")%>
                             <%=Html.ValidationMessage("emailid", "*")%>
                        </td>
                        <td>
                            <%=Html.TextBox("PassportNo2_0")%>
                            <%=Html.ValidationMessage("passportNo", "*")%>
                        </td>

                        <td>
                            <% = Html.DropDownList("ddlNationality2_", new SelectList(new[] { "Nepali", "Foreigner" }), new { id = "ddlNationality2_" })%>
                        </td>
                    </tr>
                </table></div>
   ----------------------------- Jquery -------------------------------------

 <script type="text/javascript">

     $(document).ready(function () {
         var flag = false;
         function removeDynamicallyCreatedRows() {
             var rowCount = $('#Character tr').length;
             for (var x = 1; x <= rowCount; x++) {
                 $('#trow_' + x).remove();
             }
         }
         function removeDynamicallyCreatedRows2() {
             var rowCount = $('#Character2 tr').length;
             for (var x = 1; x <= rowCount; x++) {
                 $('#trow2_' + x).remove();
             }
         }


         ///////////////////////////No of Infants/////////////////////////////

         $("#ddlNoOfChildren").change(function () {

             if (flag) {
                 removeDynamicallyCreatedRows();
             }
             flag = true;
             var self = $(this).val();
             //Keep the info for no of passengers that is added
             $("#noOfPassengers").val(self);

             var countChar = 0;

             $("[name=ddlSalts_]").attr("Name", "ddlSalts_" + countChar);
             $("[name=LastName_]").attr("Name", "LastName_" + countChar);
             $("[name=FirstName_]").attr("Name", "FirstName_" + countChar);
             $("[name=EmailId_]").attr("Name", "EmailId_" + countChar);
             $("[name=PassportNo_]").attr("Name", "PassportNo_" + countChar);
             $("[name=ddlNationality_]").attr("Name", "ddlNationality_" + countChar);

             $("[id=ddlSalts_]").attr("Id", "ddlSalts_" + countChar);
             $("[id=LastName_]").attr("Id", "LastName_" + countChar);
             $("[id=FirstName_]").attr("Id", "FirstName_" + countChar);
             $("[id=EmailId_]").attr("Id", "EmailId_" + countChar);
             $("[id=PassportNo_]").attr("Id", "PassportNo_" + countChar);
             $("[id=ddlNationality_]").attr("Id", "ddlNationality_" + countChar);

             for (var i = 1; i < self; i++) {
                 var newCharacter = '<tr id = "trow_' + i + '">'
                                            + '<td><select id = "ddlSalts_' + i + '" name="ddlSalts_' + i + '"><option value = "1">Mr</option><option value = "2">Mrs</option><option value= "3">Ms</option></select></td>'
                                            + '<td><input type = "text" name = "LastName_' + i + '" id = "LastName_' + i + '"></td>'
                                            + '<td><input type = "text"  name = "FirstName_' + i + '" id = "FirstName_' + i + '"></td>'
                                            + '<td><input type = "text" name = "EmailId_' + i + '" id = "EmailId_' + i + '"></td>'
                                            + '<td><input type = "text" name = "PassportNo_' + i + '" id = "PassportNo_' + i + '"></td>'
                                            + '<td><select id = "ddlNationality_' + i + '" name = "ddlNationality_' + i + '" ><option value = "1">Nepali</option><option value = "2">Foreigner</option></select></td>'
                                            +
                                           '</tr>'
                 $("#Character tr:last").after(newCharacter);
             }
             return;
         });



                     $("#ddlNoOfInfants").change(function () {

                        if (flag) {
                            removeDynamicallyCreatedRows2();
                        }
                        flag = true;
                        var self = $(this).val();
                        //Keep the info for no of passengers that is added
                        //$("#noOfPassengers").val(self);

                        var countChar = 0;

                        $("[name=ddlSalts2_]").attr("Name", "ddlSalts2_" + countChar);
                        $("[name=LastName2_]").attr("Name", "LastName2_" + countChar);
                        $("[name=FirstName2_]").attr("Name", "FirstName2_" + countChar);
                        $("[name=EmailId2_]").attr("Name", "EmailId2_" + countChar);
                        $("[name=PassportNo2_]").attr("Name", "PassportNo2_" + countChar);
                        $("[name=ddlNationality2_]").attr("Name", "ddlNationality2_" + countChar);

                        $("[id=ddlSalts2_]").attr("Id", "ddlSalts2_" + countChar);
                        $("[id=LastName2_]").attr("Id", "LastName2_" + countChar);
                        $("[id=FirstName2_]").attr("Id", "FirstName2_" + countChar);
                        $("[id=EmailId2_]").attr("Id", "EmailId2_" + countChar);
                        $("[id=PassportNo2_]").attr("Id", "PassportNo2_" + countChar);
                        $("[id=ddlNationality2_]").attr("Id", "ddlNationality2_" + countChar);

                        for (var i = 1; i < self; i++) {
                            var newCharacter = '<tr id = "trow2_' + i + '">'
                                            + '<td><select id = "ddlSalts2_' + i + '" name="ddlSalts2_' + i + '"><option value = "1">Mr</option><option value = "2">Mrs</option><option value= "3">Ms</option></select></td>'
                                            + '<td><input type = "text" name = "LastName2_' + i + '" id = "LastName2_' + i + '"></td>'
                                            + '<td><input type = "text"  name = "FirstName2_' + i + '" id = "FirstName2_' + i + '"></td>'
                                            + '<td><input type = "text" name = "EmailId2_' + i + '" id = "EmailId2_' + i + '"></td>'
                                            + '<td><input type = "text" nam e = "PassportNo2_' + i + '" id = "PassportNo2_' + i + '"></td>'
                                            + '<td><select id = "ddlNationality2_' + i + '" name = "ddlNationality2_' + i + '" ><option value = "1">Nepali</option><option value = "2">Foreigner</option></select></td>'
                                            +
                                           '</tr>'
                        $("#Character2 tr:last").after(newCharacter);

                        }
                        return;
                    });
     });



    </script>

1 个答案:

答案 0 :(得分:0)

你的选择器(“#Character”)是一个ID,当你的选择器是一个ID时,jQuery只返回一个元素。你应该使用标签名称或类。