選擇更改隱藏/顯示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以查找所需的元素……它確實起作用了。 不過這是很多工作。