Параметры раскрывающегося списка не отображаются в HTML

0

Я добавляю строки через jquery с одним полем в виде раскрывающегося списка (с опциями). Добавление и удаление строк отлично происходит, но опция для раскрывающегося поля не подходит. Пожалуйста помоги. попробовал 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;
    });
});
  • 1
    Вы немедленно закрыли свой тег выбора.
Теги:

4 ответа

2
Лучший ответ

Измените его на

<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' >

  • 0
    Отлично, большое спасибо всем.
0

Проблема лежит в этой строке:

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

Добавив "/" в конце, вы закрываете тег select до того, как будут определены параметры. Вы должны удалить "/" и добавить "после опций".

  • 0
    Отлично, большое спасибо всем.
0

Вы начали закрывать тег select в начале. заменить:

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

с

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

Рабочий скрипт

  • 0
    Отлично, большое спасибо всем.
0

Вы немедленно закрываете тег.

использование

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

вместо

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

DEMO

Ещё вопросы

Сообщество Overcoder
Наверх
Меню