Question

我通过jquery添加行，一个字段作为下拉列表（带选项）。添加＆amp;删除行完全正在发生，但是下拉字段的选项不会出现。请帮忙。试过jsfiddle http://jsfiddle.net/SqA9a/9/

HTML

<body>
    <div id="page_container">
        <div class="form_container">
                <h3>Add and Delete rows dynamically with textboxes using jQuery:</h3>

            <table id="expense_table" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th>Sl. No</th>
                        <th>Mode</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="text" name="reg_no_01" maxlength="10" required />
                        </td>
                        <td>
                            <select name="mode" maxlength="10" required />
                            <option value="Select" selected>Select</option>
                            <option value="Auto">Auto</option>
                            <option value="Car">Car</option>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
            <input type="button" value="Add Row" id="add_ExpenseRow" />
        </div>
        <!-- END subject_marks -->
        <div class="clearfix"></div>
    </div>
    <!-- FOOTER --> <a class="mm" href="http://mediamilan.com/" title="Go to Media Milan.com" target="_blank"></a>

</body>

jquery


$(function () {
    // GET ID OF last row and increment it by one
    var $lastChar = 1,
        $newRow;
    $get_lastID = function () {
        var $id = $('#expense_table tr:last-child td:first-child input').attr("name");
        $lastChar = parseInt($id.substr($id.length - 2), 10);
        console.log('GET id: ' + $lastChar + ' | $id :' + $id);
        $lastChar = $lastChar + 1;
        $newRow = "<tr> \
                   <td><input type='text' name='reg_no_0" + $lastChar + "' maxlength='10' /></td> \
                    <td><select name='subjects_0" + $lastChar + "' maxlength='10' /> \
                 <option value='Select' selected>Select</option> \
                 <option value='Auto'>Auto</option> \
                 <option value='Car'>Car</option></select></td> \
                    <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> \
                </tr>"
        return $newRow;
    };

    // ***** -- START ADDING NEW ROWS
    $('#add_ExpenseRow').on("click", function () {
        if ($lastChar <= 9) {
            $get_lastID();
            $('#expense_table tbody').append($newRow);
        } else {
            alert("Reached Maximum Rows!");
        }
    });

    $(".form_container").on("click", ".del_ExpenseRow", function () {
        $(this).closest('tr').remove();
        $lastChar = $lastChar - 2;
    });
});

Answer 1

将其更改为

<select name="mode" maxlength="10" required >
   <option value="Select" selected>Select</option>
   <option value="Auto">Auto</option>
   <option value="Car">Car</option>
</select>

JQuery应该是

$newRow = "<tr>
               <td><input type='text' name='reg_no_0" + $lastChar + "' maxlength='10' /></td>
               <td><select name='subjects_0" + $lastChar + "' maxlength='10' >
                   <option value='Select' selected>Select</option>
                   <option value='Auto'>Auto</option>
                   <option value='Car'>Car</option></select></td>
                <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> 
           </tr>"
        return $newRow;

您正在

结束select标记

<td><select name='subjects_0" + $lastChar + "' maxlength='10' />

因此html忽略option，因为它将在select之外。它应该是

<td><select name='subjects_0" + $lastChar + "' maxlength='10' >

Answer 2

您正在立即关闭选择标记。

使用

<td><select name='subjects_0" + $lastChar + "' maxlength='10' >

而不是

<td><select name='subjects_0" + $lastChar + "' maxlength='10' />

DEMO

Answer 3

您在开始时关闭了选择标记。替换：

<td><select name='subjects_0" + $lastChar + "' maxlength='10' />

与

<td><select name='subjects_0" + $lastChar + "' maxlength='10' >

<强> Working Fiddle

Answer 4

问题在于这一行：

<td><select name='subjects_0" + $lastChar + "' maxlength='10' />

通过在末尾添加“/”，可以在定义选项之前关闭选择标记。您应该删除“/”并在选项之后添加“。

下拉选项未在html中反映出来

4 个答案: