How to add a <select> tag to an HTML doc when a user clicks on <a href…> tag using JQuery
Question
I am creating a page that lets the user select an item from a list, and provides a mechanism to add additional items from the same drop down menu.
My HTML code snippet is:
<tr>
<td class="ventureadd">Size</td>
<td>
<input type="text" size="10" name="txtAddress1" />
<select id="selSize">
<option value="noselection">Select One</option>
<option value="feet">Sq. Feet</option>
<option value="meters">Sq. Meters</option>
<option value="gunta">Gunta</option>
<option value="yards">Sq. Yards</option>
<option value="acre">Acres</option>
</select>
</td>
</tr>
and the JavaScript is:
$(document).ready(function(){
$(".addhousinglink").click(function(){
$('#addhousing').append(
$("<p>Here's a jQuery object</p>")
);
return true;
});
Where am I going wrong?
2 answers
solution1
0 ACCPTED 2011-03-31 08:52:51
There are two options for such tasks, one - append, second - unhide. For complex non-dynamic stuff, I would suggest using second one.
Append (HTML)
<a id="thisIsAnchor" href="#">Add some dropdown box here!</a><div id="here"></div>
Append (JS)
$('#thisIsAnchor').click(function(){
$('#here').append('<select><option>Here comes and option!</option><option>Then, what am I?</option></select>');
});
Unhide (HTML)
<a id="thisIsAnchor" href="#">Add some dropdown box here!</a><div id="here"><select style="display: none"><option>Here comes and option!</option><option>Then, what am I?</option></select></div>
Unhide (JS)
$('#thisIsAnchor').click(function(){
$('#here select').show();
});
solution2
0 2011-03-31 09:33:29
Hey you can do this simply with the help of html() function in the jQuery. Here is how you cand do this --
First HTML --
<html>
<head>
</head>
<body>
<a href="#test" id="test" >Click Me!</a>
<div id="test_handler"></div>
</body>
</html>
And her is the jQuery --
$(document).ready(function() {
$("a#test").click(function() {
$("div#test_handler").html("<select name=\"test_select\"><option value=\"test\">Test</option></select>");
});
});
Or you can view this link jSfiddle#VmAuC
This jSfiddle is with fading toggle effect --- http://jsfiddle.net/VmAuC/5/ (Hope you like this toggling effect!)
Tell if this helps you or if you want anything more you comment and ask me anytime.
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.