Question

我有这个选择下拉菜单在我的下拉菜单中，当我选择其中一个选项时，将显示该特定选项的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中的外部源

我对此感到陌生，我不知道应该正确放置代码。

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>

否则它正在发挥作用。

以上是加载到库

之后的工作演示

FiddleDemo

Answer 2

我把它解决了

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

在nlform.js中的关闭函数

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

Answer 3

不确定这是否仍然相关，但是nl-form实际上并没有使用选择输入。如果您在Firebug中观察页面，您会注意到实际的Select元素具有＆＃34; none＆＃34;的可见性。 nl-form实际上做的是在你创建的选择中选择选项并将它们变成一系列不同的html元素（div，a和ul元素）。因此，当您更改nl-form选项上的选项时，您无法监听更改事件，因为它实际上并未发生。

事实证明，做起来并不容易或有趣。我在监控更改时所做的是在close()中的nlform.js方法底部创建自定义事件。然后在我的javascript中，我听了那个特定的事件，不得不写了很多javascript来找到我需要的元素......它最终确实有效。不过已经做了很多工作。

jquery on select change hide / show div

3 个答案: