select 要素の選択結果で別の select 要素の選択肢を絞り込む jQuery プラグイン "Select Narrowing Plugin"が便利！

 

js

<script type="text/javascript">
$(function () {
    $("#category").narrows("#food");    // #category は #food を絞り込む
});
</script>

親カテゴリのid="category"で

子カテゴリのid="food"を絞り込んでいます。

 

 

html

<!-- 親select：食品カテゴリ -->
<select id="category">
    <option value="">-- Food Category --</option>
    <option value="meat">Meat</option>
    <option value="vegetable">Vegetable</option>
    <option value="fruit">Fruit</option>
</select>
<!-- 子select：食品 -->
<select id="food">
    <option value="">-- Food --</option>
    <option value="beef" data-category="meat">Beef</option>
    <option value="pork" data-category="meat">Pork</option>
    <option value="chicken" data-category="meat">Chicken</option>
    <option value="lettuce" data-category="vegetable">Lettuce</option>
    <option value="carrot" data-category="vegetable">Carrot</option>
    <option value="tomato" data-category="vegetable">Tomato</option>
    <option value="apple" data-category="fruit">Apple</option>
    <option value="banana" data-category="fruit">Banana</option>
    <option value="melon" data-category="fruit">Melon</option>
</select>

 

親カテゴリのid="category"で選択されたvalue値で

子のdata-category（data-親のID）と一致するものを絞り込み表示しています。

 

 

参考サイト：

 

category cloud