例1

基本的な「親→子」の階層関係

$("#ex1-food-category").narrows("#ex1-food");

例2

親selectが未選択の場合、子selectは全て選択可能

$("#ex2-food-category").narrows("#ex2-food", {
    disable_if_parent_is_null: false
});

例3

「親→子→孫」の3世代

$("#ex3-continent").narrows("#ex3-country");
$("#ex3-country").narrows("#ex3-city");

例4

「親→子1、子2」
1つの親selectの選択結果が複数の子selectの選択肢に同時に影響

$("#ex4-cuisine").narrows("#ex4-food, #ex4-alcohol");

例5

「親1、親2→子」
複数の親selectの選択結果が1つの子selectの選択肢に影響。Country と Category 両方を選択して初めて Menu が選択可能になります

$("#ex5-country, #ex5-category").narrows("#ex5-menu");

例6

子selectの1つのoptionが、親selectの複数のoptionにマッチ。
うどんやカレーは食べ物ですが、飲み物であると主張する人々もいます。

<select id="ex6-category">
  <option value="">-- Food Category --</option>
  <option value="food">食べ物</option>
  <option value="drink">飲み物</option>
</select>
<select id="ex6-menu">
  <option value="">-- Menu --</option>
  <option value="sushi"     data-ex6-category="food">寿司</option>
  <option value="tempura"   data-ex6-category="food">天ぷら</option>
  <option value="green-tea" data-ex6-category="drink">お茶</option>
  <option value="udon"      data-ex6-category="food,drink">うどん</option><!-- data-ex6-category に複数のカテゴリを指定 -->
  <option value="dumpling"  data-ex6-category="food,drink">カレー</option><!-- 同上 -->
</select>
$("#ex6-category").narrows("#ex6-menu", {
    allow_multiple_parent_values: true
});