选择更改隐藏/显示div的jQuery

Question

我有这个选择下拉菜单，在我的下拉菜单中，当我选择一个选择时，将显示该特定选择的div，其余的将保持隐藏。

我尝试使用此演示，但无法正常工作。

   <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。 演示应该怎么做？ 请注意，它具有一个链接脚本文件，用于检查jsfiddle中的外部源

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

Answer 1

您的代码需求

<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>

否则它正在工作。

这是在库上方加载后的工作演示

小提琴演示

Answer 2

我解决了

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

在nlform.js中的close函数中

然后，通过侦听select元素的change事件，我得到了好东西！

Answer 3

不知道这是否仍然有意义，但是nl-form实际上并不使用select输入。 如果您在Firebug中观察页面，您会注意到实际的Select元素的可见性为“无”。 nl-form所做的实际上是将您创建的选择中的选项转换为一系列不同的html元素（div，a和ul元素）。 因此，当您在nl形式的select上更改选项时，您将无法监听更改事件，因为它实际上并未发生。

事实证明，这样做并非易事或乐趣。 我监视更改的方法是在nlform.js的close()方法的底部创建一个自定义事件。 然后，在我的javascript中，我听了那个特定的事件，不得不编写大量的javascript以查找所需的元素……它确实起作用了。 不过这是很多工作。