jquery选择变化隐藏/显示div

我有这个选择下拉列表，当我选择其中一个选项时，将显示该特定选项的div，其余部分将保持隐藏状态。jquery选择变化隐藏/显示div

我试过使用这个 Demo，但它不起作用。

<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(); 
    }); 
    });

可能是什么问题？

并且还在div家族上，我想放置这个ff。 Demo应该怎么做？请注意，它有一个链接脚本文件检查jsfiddle中的外部源

我是新来的，我不知道应该如何正确放置代码。

来源

2014-09-13 Lyner Kharl

你必须在第一个小提琴中添加jQuery库。它的工作正常。 http://jsfiddle.net/kunknown/2up7jb3a/1/ – Unknown 2014-09-13 04:17:31

@Unknown我在本地主机上试过它，但它也没有工作 – 2014-09-13 04:22:17

你应该下载jQuery代码并保存为.js文件，然后把你的localhost项目并链接到您的项目 – Developer 2014-09-13 04:50:12

你的代码需要

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>// you can add what ever is latest version available.

既然你已经书面变更事件最好加一个伪选择的选项，如：

<option value="select" selected>select</option>

否则其工作正常。

这里是上述图书馆

FiddleDemo

来源

2014-09-13 04:33:26

做的问题的JavaScript的版本？ – 2014-09-14 09:17:05

我已经加载了jQuery库仍然无法正常工作。我做了另一个演示http://jsfiddle.net/2up7jb3a/5/它可以在小提琴上正常工作，但是在本地主机上，当我选择其中一个下拉框时没有任何效果，该提示只显示一次。 – 2014-09-15 03:22:47

对我来说你的代码正在工作检查你的本地主机，看看是否所有的文件路径都是正确的。 – 2014-09-15 04:45:14

不知道这仍然是相关的加载后，你的工作演示，但NL-形式不实际使用的选择输入。如果您观察Firebug中的页面，您会注意到实际的Select元素具有“none”的可见性。 nl-form所做的实际上是在你创建的select中选择选项，并将它们变成一系列不同的html元素（div，a和ul元素）。所以，当你在一个nl-form select上改变一个选项时，你不能监听change事件，因为它实际上并没有发生。

事实证明，这并不容易或有趣。我所做的监控变化是在nlform.js的close()方法底部创建一个自定义事件。然后在我的JavaScript中，我倾听了特定的事件，并且必须编写大量的JavaScript才能找到我需要的元素......它最终能够工作。尽管如此，这还是很多工作。

来源

2015-03-17 14:58:26 frosty

我解决它通过把

$(this.elOriginal).find('option').removeAttr("selected"); 
        $(this.elOriginal).find('option:eq('+this.selectedIdx+')').attr("selected", "selected"); 
        $(this.elOriginal).trigger('change');

密切功能nlform.js

然后通过监听改变选择元素让我的东西的活动！

来源

2015-12-19 17:48:23 lemonjelly

jquery选择变化隐藏/显示div

回答

相关问题