셀렉트 분류 jquery 상위메뉴에 따른 하위메뉴 변경
본문
안녕하세요 필터링 jquery 하고있는데 몇가지 어려운 부분이 있어서 문의드려요 ㅠㅠ
차량모델명이 브랜드 선택시에 따라 하위메뉴가 바뀌어서 저부분을 브랜드 선택시 해당 모델명만 나오게 하려면 어떻게 소스를 짜야할까여 ㅠㅠ
예를 들어 브랜드 선택이 APRILIA 이면 모델명은 APRILIA_1. APRILIA_2, APRILIA_3
이 나와야하고 브랜드가 BMW 이면 모델명은 BMW_1, BMW_2, BMW_3 이런식으로 나와야합니다.
소스는 아래에 같이 첨부해두었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>필터링 테스트</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
<!--
.glyphicon { cursor: pointer; }
input,
select { width: 100%; }
-->
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1" style="margin-top:150px">
<h1>필터링 테스트 </h1>
<div class="table-responsive">
<!-- Initialization
* js-dynamitable => dynamitable trigger (table)
-->
<table class="js-dynamitable table table-bordered">
<!-- table heading -->
<thead>
<!-- Sortering
* js-sorter-asc => ascending sorter trigger
* js-sorter-desc => desending sorter trigger
-->
<tr>
<th width="20%">차량 브랜드 <span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span> <span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span> </th>
<th width="25%">차량 모델명 <span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span> <span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span> </th>
<th>차량 연식 <span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span> <span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span> </th>
<th>배기량 <span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span> <span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span> </th>
<th>오일필터 <span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span> <span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span> </th>
</tr>
<!-- Filtering
* js-filter => filter trigger (input, select)
-->
<tr>
<th> <!-- input filter -->
<select class="js-filter form-control">
<option value="">브랜드 선택</option>
<option value="APRILIA">APRILIA</option>
<option value="BMW">BMW</option>
<option value="DUCATI">DUCATI</option>
<option value="HARLEY">HARLEY DAVIDSON</option>
<option value="HONDA">HONDA</option>
<option value="HUSQVARAN">HUSQVARAN</option>
<option value="HUSABERG">HUSABERG</option>
<option value="KAWASAKI">KAWASAKI</option>
<option value="KTM">KTM</option>
<option value="PIAGGIO">PIAGGIO</option>
<option value="SYM">SYM</option>
<option value="SUZUKI">SUZUKI</option>
<option value="YAMAHA">YAMAHA</option>
<option value="VESPA">VESPA</option>
</select>
</th>
<th> <!-- select filter -->
<select class="js-filter form-control">
<option value="">모델명 선택</option>
<option value="APRILIA_1">APRILIA_1</option>
<option value="APRILIA_2">APRILIA_2</option>
</select>
</th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" type="text" value=""></th>
</tr>
</thead>
<!-- table body -->
<tbody>
<tr>
<td>APRILIA</td>
<td>SL 750 Shiver / ABS</td>
<td class="text-right">2010</td>
<td class="text-right">750</td>
<td class="text-right">HF565</td>
</tr>
<tr>
<td>APRILIA</td>
<td>SL 750 Shiver GT / ABS</td>
<td class="text-right">2010</td>
<td class="text-right">750</td>
<td class="text-right">HF565</td>
</tr>
<tr>
<td>APRILIA</td>
<td>SMV 750 Dorsoduro / ABS</td>
<td class="text-right">2010</td>
<td class="text-right">750</td>
<td class="text-right">HF565</td>
</tr>
<tr>
<td>APRILIA</td>
<td>SMV 750 Dorsoduro Factory / ABS</td>
<td class="text-right">2010</td>
<td class="text-right">750</td>
<td class="text-right">HF565</td>
</tr>
<tr>
<td>APRILIA</td>
<td>850 Mana / ABS</td>
<td class="text-right">2010</td>
<td class="text-right">750</td>
<td class="text-right">HF565</td>
</tr>
<tr>
<td>APRILIA</td>
<td>850 Mana GT / ABS</td>
<td class="text-right">2010</td>
<td class="text-right">750</td>
<td class="text-right">HF565</td>
</tr>
<tr>
<td>APRILIA</td>
<td>850 SRV / ABS</td>
<td class="text-right">2010</td>
<td class="text-right">750</td>
<td class="text-right">HF565</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- dynamitable -->
<script src="dynamitable.jquery.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
