下鑽使用JavaScript

Question

選擇選項

我開始打造「向下鑽取」選擇元素（選擇基於您選擇前面的選項，篩選他們的選擇要素。

是，我有以前從來沒有這樣做，我要尋找一個「最佳實踐」的方式來這種常見的情況，你能指出我的教程，或者提供一些示例代碼，我應該如何處理呢？

解決方案

我原創最終想到隱藏和顯示選項，但事實證明，這種方法不是跨瀏覽器兼容的。我遇到的最簡單的跨瀏覽器方法是創建原始選擇選項的副本，並在用戶選擇後替換選項。我寫了一個小的jQuery插件，使它更加可重用。

<select id="first"> 
    <option value="1">Fruits</option> 
    <option value="2">Vegetables</option> 

</select> 
<select id="second"> 
    <option> -- Select -- </option> 
    <!-- class is in the format of "parentId_parentValue" --> 
    <option class="first_1" value="1">Apple</option> 
    <option class="first_1" value="2">Orange</option> 
    <option class="first_1" value="3">Banana</option> 
    <option class="first_2" value="4">Carrot</option> 
    <option class="first_2" value="5">Broccoli</option> 
    <option class="first_2" value="6">Spinach</option> 
</select> 

<script type="text/javascript"> 
$.fn.drilldown = function(child) { 
    var $parent = this; 
    var parentId = $parent.attr('id'); 
    var $child = $(child); 
    var childId = $child.attr('id'); 
    var optionIdentifier = '.' + parentId + '_'; 
    var selectedChildOption = $child.val(); 
    var $childCopy = $('<select id='+parentId+childId+' />'); 

    $childCopy.html($child.find('option')).hide().appendTo('body'); 

    var refreshOptions = function(){ 
     var selectedParentValue = $parent.val(); 
     $child.html($childCopy.find(optionIdentifier+selectedParentValue).clone()); 
     $child.prepend('<option value="0" selected="selected"> -- Select -- </option>'); 
    }; 

    refreshOptions(); 
    $child.val(selectedChildOption); 

    $parent.change(function(){ 
     refreshOptions(); 
     $child.trigger('change').focus(); 
    }); 
}; 

$(document).ready(function(){ 
    $('#first').drilldown('#second'); 
}); 
</script> 

這裏是一個jsFiddle表明，它的作品。

Answer 1

如果你可以使用jQuery有一個很好的插件，可以這樣做： http://www.ajaxray.com/Examples/depend.html

它基本上使用類定義的層次結構如父母選擇選項1具有abc的值，屬於父母的子選擇選項將具有類sub_abc。

好又簡單！這當然有很多方法，這似乎是一條非常簡單的路線。

Answer 2

我可能會做這樣的事情：

$(document).ready(function(){ 
    var sv = [['apples', 'oranges'],['honda', 'plymouth']]; 

    $('#category').change(function(){ 
     $('#subcat option').remove(); 

     var a = sv[$('#category option:selected').val()]; 
     for(var n = 0; n < a.length; ++n) 
     { 
      $('#subcat').append($('<option></option>') 
           .attr('value', n) 
           .text(a[n])); 
     } 
    }); 
}); 

Fiddle here

，對於小數據集不過我只會做。如果你有大量的數據要切換（即處理地理數據集），我很可能通過.ajax()