CODEWITHSUNDEEP
jqueryhtml
user0129e021939232
user0129e021939232

Reputation: 6355

jquery append new select box on click

I want to be able to append a new standardized select box option every time I click on my paragraph, for example my paragraph is written as below:

<p id="newsublevel">Click here to add a new sub level to your navigation</p>

Once I click this I want my jQuery code to add a new select box under the existing in the div called maincontent(which is a class not an id). the jQuery I have now has a syntax warning but I haven't got much experience in this area, is there anyone who knows what I am doing wrong?

by default I have this on my add.html page

<h2 class="sitemaphead">Sitemap</h2>
<p>Add a sub level to About.</a></p>

<select>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
</select>

<p id"newsublevel">Click here to add another sub level</p>

in my jQuery I have the following:

    $("#newsublevel").click(function() {
$(".maincontent").append('<select>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
</select>');
    });

Upvotes: 0

Views: 5402

Answers (4)

Cleiton Souza
Cleiton Souza

Reputation: 881

Check ur html... value*-*"Home" and *id"*newsublevel"

To do this, u can try:

$('#newsublevel').live('click', function() {
    $('select').clone().appendTo('.maincontent')
})

Upvotes: 0

Anton
Anton

Reputation: 32591

Add \ at the end of every string line like this

$(".maincontent").append('<select>\
<option value="Home">Home</option>\
<option value="Home">Home</option>\
<option value="Home">Home</option>\
<option value="Home">Home</option>\
<option value="Home">Home</option>\
<option value="Home">Home</option>\
<option value="Home">Home</option>\
</select>');

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27382

Replace

<p id"newsublevel">

With

<p id = "newsublevel">
-----^^^^----

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

assignment of value="Home"

you code becomes 

$("#newsublevel").click(function () {
    $(".maincontent").append('<select><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option></select>');
});

and HTML

<p id="newsublevel">

Upvotes: 1

Related Questions