CODEWITHSUNDEEP
javascriptjqueryhtml
lancey
lancey

Reputation: 377

Appending a form with select option fields

Im trying to append a table with an additional row. It appends correctly except for the select option. My append jquery is:

$("#add_item").click(function(){
        $( "#itemlist" ).append( "\
            <tr id='add_item'>\
                <td class='add_item_strip'></td>\
                <td><input type='checkbox' value='1'/></td>\
                <td><input placeholder='Qty' class='qty' type='text'/></td>\
                <td>\
                    <select class='form-control type'/>\
                        <option value='service'>Service</option>\
                        <option value='hours'>Hours</option>\
                        <option value='days'>Days</option>\
                        <option value='product'>Product</option>\
                    </select>\
                </td>\
                <td><input placeholder='Name' class='name' type='text'/></td>\
                <td><input placeholder='Description' class='description'/></td>\
                <td><input placeholder='Price' type='text' class='price'/></td>\
                <th><input type='checkbox' value='7'/></th>\
                <td></td>\
                <td><input placeholder='Total' class='subtotal' type='text'/></td>\
            </tr>\
            <tr class='edit_table_space'>\
            </tr>\
        " );
    });

The html within my browser inspector is showing the options out of the select tag like this:

<select class="form-control type"></select>

<option value="service"></option>

<option value="hours"></option>

<option value="days"></option>

<option value="product"></option>

any idea why?

Upvotes: 0

Views: 133

Answers (2)

Ezra Morse
Ezra Morse

Reputation: 131

Try removing the '/' at the end of the opening "SELECT" tag.

Also, please consider that appending this much text inline just might make future code management a pain. Try leaning on a templating system like handlebars.js

Upvotes: 0

Nate Barbettini
Nate Barbettini

Reputation: 53600

The problem is that you are closing the <select> tag prematurely:

<select class='form-control type'/>
---------------------------------^

A /> closes the tag immediately. Try this:

...
<select class='form-control type'>\
    <option value='service'>Service</option>\
    <option value='hours'>Hours</option>\
    <option value='days'>Days</option>\
    <option value='product'>Product</option>\
</select>
...

Upvotes: 3

Related Questions