jQuery 체인 콤보박스

jQuery chained combobox
jQuery 연결된 콤보박스, 카테고리 드랍다운 메뉴

1 예시 1: 2개 연결[ | ]

html

Copy

<select id="crops1" name="crops1">
  <option value="">-- 선택 --</option>
  <option value="fruit">과일</option>
  <option value="vegetable">채소</option>
</select>
<select id="crops2" name="crops2">
  <option value="">-- 선택 --</option>
  <option class="fruit" value="apple">사과</option>
  <option class="fruit" value="banana">바나나</option>
  <option class="fruit" value="lemon">레몬</option>
  <option class="vegetable" value="onion">양파</option>
  <option class="vegetable" value="pumpkin">호박</option>
</select>

<script src="//code.jquery.com/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-chained/1.0.1/jquery.chained.min.js'></script>
<script>
  $("#crops2").chained("#crops1");
</script>

2 예시 2: 3개 연결[ | ]

html

Copy

<select id="region" name="region">
  <option value="">-- 본부 --</option>
  <option value="A">강북본부</option>
  <option value="B">강남본부</option>
  <option value="C">서부본부</option>
</select>
<select id="maker" name="maker">
  <option value="">-- 제조사 --</option>
  <option class="A" value="hyundai">현대</option>
  <option class="A" value="kia">기아</option>
  <option class="B" value="benz">벤츠</option>
  <option class="B" value="bmw">BMW</option>
</select>
<select id="size" name="size">
  <option value="">-- 크기 --</option>
  <option value="large" class="hyundai kia benz bmw">대형</option>
  <option value="medium" class="hyundai kia benz">중형</option>
  <option value="small" class="hyundai kia bmw">소형</option>
</select>

<script src="//code.jquery.com/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-chained/1.0.1/jquery.chained.min.js'></script>
<script>
  $("#maker").chained("#region");
  $("#size").chained("#maker");
</script>

3 같이 보기[ | ]

4 참고[ | ]

http://www.appelsiini.net/projects/chained