基本的な「親→子」の階層関係
$("#ex1-food-category").narrows("#ex1-food");
親selectが未選択の場合、子selectは全て選択可能
$("#ex2-food-category").narrows("#ex2-food", { disable_if_parent_is_null: false });
「親→子→孫」の3世代
$("#ex3-continent").narrows("#ex3-country"); $("#ex3-country").narrows("#ex3-city");
「親→子1、子2」
1つの親selectの選択結果が複数の子selectの選択肢に同時に影響
$("#ex4-cuisine").narrows("#ex4-food, #ex4-alcohol");
「親1、親2→子」
複数の親selectの選択結果が1つの子selectの選択肢に影響。Country と Category 両方を選択して初めて Menu が選択可能になります
$("#ex5-country, #ex5-category").narrows("#ex5-menu");
子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 });