マルチドロップダウンJavaScriptは一度しか動作しません

Question

EDITED こんにちは、私はJavaScriptのための完全に新しいです、私はあなたの助けが私の問題を解決するために必要です。 複数レベルのドロップダウンにはこのjavascriptを使用します.2つ以上のドロップダウンに使用すると、2番目のドロップダウンは選択の最初のドロップダウンシーケンスに従います。

問題は、すべてのマルチレベルドロップダウンが異なるはずです。 現在 ドロップダウンA： 1レベル：最初のオプション 第二レベル：最初のオプションのコンテンツのドロップダウン

ドロップダウンB： 1レベル：第二の選択肢 第二レベル：それがあるべき最初のオプションオプション内容]ドロップダウン

、

ドロップダウンA： 1レベル：最初のオプション 第二レベル：最初のオプションのコンテンツのドロップダウン

ドロップダウンB： 1レベル：第二の選択肢 第二レベル：2番目のオプションコンテンツのドロップダウン

はここに私のjavascriptのコードです：

$(document).ready(function() { 
    $('#multi-dropdown').bind('change', function() { 
    var elements = $('div.container').children().hide(); // hide all the elements 
    var value = $(this).val(); 

    if (value.length) { // if somethings' selected 
     elements.filter('.' + value).show(); // show the ones we want 
    } 
    }).trigger('change'); 

    $('.second-level-select').bind('change', function() { 
    var elements = $('div.second-level-container').children().hide(); // hide all the elements 
    var value = $(this).val(); 

    if (value.length) { // if somethings' selected 
     elements.filter('.' + value).show(); // show the ones we want 
    } 
    }).trigger('change'); 
}); 

あなたがここでそれを見つけることができます： https://jsfiddle.net/aew2960d/

Answer 1

あなたは複数持つことができません重複IDを持つ要素あなたの場合、両方のドロップダウンのIDはmulti-dropdownです（JSFiddleリンクを参照）。 2番目のドロップダウンのIDを変更し、適切なイベントをバインドするだけです。