[英]JQuery - show multiple select boxes on clicking a link
I have written a small function in JQuery, took me a little while but I got there. 我已经在JQuery中编写了一个小函数,花了我一段时间,但是我到达了那里。 You click a link and a dropdown shows.
您单击一个链接,将显示一个下拉列表。 But I need to click the link and show the dropdown, but upon clicking it again I want the same dropdown again, up to a maximum or 4.
但是我需要单击链接并显示下拉菜单,但是再次单击后,我希望再次选择相同的下拉菜单,最大为4。
Now I'm stuck with this a bit, this is how far I got. 现在,我对此有所保留,这就是我所走的距离。
HTML: HTML:
<a class="toggle" href="#">Add another Location</a>
insert more locations dropdownbox 插入更多位置下拉框
JQuery: jQuery的:
$(function() {
$("a.toggle").click(function(e) {
$(this).next().toggle();
e.preventDefault();
});
});
CSS: CSS:
.toggleDiv { display: none; }
.toggle { font: 14px black Tahoma; }
Can anyone point in the right direction. 任何人都可以指出正确的方向。 My JSFiddle is here:
我的JSFiddle在这里:
http://jsfiddle.net/Painstar/bkVNk/ http://jsfiddle.net/Painstar/bkVNk/
Thanks! 谢谢!
I've updated the fiddle you sent with how I'd do it: 我已经更新了您发送给小提琴的方法:
jQuery jQuery的
var current = 1;
$(function() {
$("a.toggle").click(function(e) {
if(current <= 4) {
$("#moreLocations" + current).show();
current += 1;
}
e.preventDefault();
});
});
HTML 的HTML
<a class="toggle" href="#">Add another Location</a>
<div id="moreLocations1" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations2" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations3" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations4" class="toggleDiv">insert more locations dropdownbox</div>
Assuming you wish to have the 4 boxes as seperate items. 假设您希望将4个框作为单独的项目。
You could also use the .sibling()
with the ID, but if you know the ID
's then that should be fine. 您还可以将
.sibling()
与ID一起使用,但是如果您知道ID
的话,那应该没问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.