[英]jquery on select change hide/show div
I have this select drop-down where in my drop-down when i select one of the choices the div for that particular choice will be displayed and the rest will remain hidden. 我有这个选择下拉菜单,在我的下拉菜单中,当我选择一个选择时,将显示该特定选择的div,其余的将保持隐藏。
I tried using this Demo but it don't work. 我尝试使用此演示,但无法正常工作。
<form id="nl-form" class="nl-form">
<select id="choices">
<option value="family" selected>family</option>
<option value="closefriend">close friend</option>
<option value="acquaintance">acquaintance</option>
</select>
<div class="nl-overlay"></div>
</form>
<div id="family" class="chosentree">family</div>
<div id="closefriend" class="chosentree">closefriends</div>
<div id="acquaintance" class="chosentree">acquaintance</div>
$(function() {
$('.chosentree').hide();
$('#choices').change(function(){
//$('.chosentree').hide();
$('#' + $(this).val()).show();
});
});
What could be the problem? 可能是什么问题呢?
and also on the div family, I want to place this ff. 还有div家庭,我想把这个ff。 Demo how should it be done? 演示应该怎么做? Notice that it has a link script file check external sources in jsfiddle 请注意,它具有一个链接脚本文件,用于检查jsfiddle中的外部源
I'm new with this and I don't know what should be the proper placing of codes. 我是新来的,我不知道应该如何正确放置代码。
your code need 您的代码需求
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>// you can add what ever is latest version available.
since you have written change event better add a dummy select option like: 由于您已编写更改事件,因此最好添加一个虚拟选择选项,例如:
<option value="select" selected>select</option>
otherwise it is working. 否则它正在工作。
Here is your working demo after loading above library 这是在库上方加载后的工作演示
I solved it by putting 我解决了
$(this.elOriginal).find('option').removeAttr("selected");
$(this.elOriginal).find('option:eq('+this.selectedIdx+')').attr("selected", "selected");
$(this.elOriginal).trigger('change');
in close function in nlform.js 在nlform.js中的close函数中
Then by listening to change event of the select element I get my goodies! 然后,通过侦听select元素的change事件,我得到了好东西!
Not sure if this is still relevant, but nl-form doesn't actually use the select inputs. 不知道这是否仍然有意义,但是nl-form实际上并不使用select输入。 If you observe the page in Firebug, you'll notice the actual Select elements have a visibility of "none". 如果您在Firebug中观察页面,您会注意到实际的Select元素的可见性为“无”。 What nl-form does is actually take the options in the select that you create and turns them into a series of different html elements (div, a, and ul elements). nl-form所做的实际上是将您创建的选择中的选项转换为一系列不同的html元素(div,a和ul元素)。 So when you change an option on an nl-form select, you cannot listen for the change event because it doesn't actually happen. 因此,当您在nl形式的select上更改选项时,您将无法监听更改事件,因为它实际上并未发生。
It turns out it's not real easy or fun to do. 事实证明,这样做并非易事或乐趣。 What I did to monitor the changes was create a custom event at the bottom of the close()
method in nlform.js
. 我监视更改的方法是在nlform.js
的close()
方法的底部创建一个自定义事件。 Then in my javascript, I listened for that particular event and had to write a lot of javascript to find the elements I needed...it did eventually work. 然后,在我的javascript中,我听了那个特定的事件,不得不编写大量的javascript以查找所需的元素……它确实起作用了。 It's a lot of work though. 不过这是很多工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.