ディビジョンを表示/非表示にするJavaScriptの連鎖ドロップダウンリスト？

Question

私は、最後に選択した項目を表示/非表示にする機能と連鎖ドロップダウンリストを組み合わせようとしています。私は研究し、両方を個別に行う方法を見つけましたが、javascript（私は確かにデザイナーの方が多い）を組み合わせることになると、壁に打ち勝っています。私はこれで私を助けてくれる人に感謝します。

これは私がうまくいきたいです：ユーザーはドロップダウンリスト1から選択します。ドロップダウンリスト2のオプションは、1の選択に基づいて表示されます。ユーザーはドロップダウンリスト2から選択し、適切なdivが表示されます。

ここで私はdivの表示/非表示にするにはJavascriptを使用しています。ここでは

function showDiv(divID) 
{ 
    var div = document.getElementById(divID); 
    div.style.display = ""; //display div 
} 

function hideDiv(divID) 
{ 
    var div = document.getElementById(divID); 
    div.style.display = "none"; // hide 
} 

function hideAllDivs() 
{ 
    //Loop through the seclect menu values and hide all 
    var courseSelect = document.getElementById("courseSelect"); 
    for (var i=0; i<=courseSelect.options.length -1; i++) 
    { 
     hideDiv(courseSelect.options[i].value); 
    } 
} 

function toggle(showID){ 
    hideAllDivs(); // Hide all 
    showDiv(showID); // Show the one we asked for 
} 

をだチェーンドロップダウンリストのためのJavascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 

<script type="text/javascript" defer> 
function cascadeSelect(parent, child){ 
    var childOptions = child.find('option:not(.static)'); 
    child.data('options',childOptions); 

    parent.change(function(){ 
     childOptions.remove(); 
     child 
     .append(child.data('options').filter('.sub_' + this.value)) 
     .change(); 
    }) 

    childOptions.not('.static, .sub_' + parent.val()).remove(); 

} 

$(function(){ 
    cascadeForm = $('.cascadeTest'); 
    deptartmentSelect = cascadeForm.find('.deptartmentSelect'); 
    courseSelect = cascadeForm.find('.courseSelect'); 

    cascadeSelect(deptartmentSelect, courseSelect); 
}); 

そして最後に、私のHTML（簡体字）

<form action="#" class="cascadeTest"> 
<table> 
<tr> 
<th>Organization:</th> 
    <td><select name="deptartmentSelect" class="deptartmentSelect"> 
     <option value="0">Select a Department</option> 
     <option value="1">Dept A</option> 
     <option value="2">Dept B</option> 
     <option value="3">Dept C</option> 
     </select></td> 
    </tr> 
    <tr> 
    <th>Territory:</th> 
    <td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)"> 
     <option value="0" class="static">- Courses -</option> 
     <option value="A1" class="sub_1">Course A1</option> 
     <option value="B1" class="sub_2">Course B1</option> 
     <option value="C1" class="sub_3">Course C1</option> 
     </select></td> 
    </tr> 
</table> 
</form> 
<div id="A1" style="display:none;">I am Course A1</div> 
<div id="B1" style="display:none;">I am Course B1</div> 
<div id="C1" style="display:none;">I am Course C1</div> 

おはようございます！

Answer 1

ここには、生のjavascriptを混在させたjQueryがあるようです。 FYIでは、あなたが書いた関数のいくつかは、すでにjQueryに含まれているので、必要ではありません。

まず、showDivとhideDiv関数を削除します。これらは、それぞれのjQueryの一行を行うことができます。

は

$('#divId').show(); 
$('#divId').hide(); 

あなたhideAllDivsとトグル機能については、これらはあまりにも書き換えることができます。

function hideAllDivs() { 
    // fyi, your select element does not have id="courseSelect". 
    // I am using name to select it, but you could also use class 
    // to use the id selector, your select has to have id="courseSelect" 
    $('select[name="courseSelect"] option').each(function() { 
     $('#' + $(this).val()).hide(); 
    }); 
} 

function toggle(showId) { 
    hideAllDivs(); 
    $('#' + showId).show(); 
} 

ユーザーがドロップダウンリスト2から選択したときに表示または非表示にするには、jQueryの変更メソッドを使用できます。 HTML要素にonchange = "javascript"属性を持つ必要はありません。

$('select[name=courseSelect]').change(function() { 
    toggle($(this).find('option:selected').val()); 
});