How to add a <select> tag to an HTML doc when a user clicks on <a href...> tag using JQuery
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 valu开发者_StackOverflow中文版e="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?
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();
});
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!
加载中,请稍侯......
精彩评论