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

回答

相關問題