5つのドリルダウンボタンが現れて、ボタンを選択すると2つのドリルダウンボタンになるという奇妙なことがおっています。
最初、上記のように5つのボタンがあって、そのうちの一番左のボタンをいじるとボタンの数が2つになります。本来ボタンは2つのみを想定していて、一番左のボタンは2番目のボタンの要素を司るものです。
index.html には
<html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css"> </head> <body> <select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:600px;"> <option value="0">---</option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> </select> <select name="type" id="type1"> <option value="1">a-1</option> <option value="2">a-2</option> <option value="3">a-3</option> <option value="4">a-4</option> </select> <select name="type" id="type2"> <option value="5">b-1</option> <option value="6">b-2</option> <option value="7">b-3</option> <option value="8">b-4</option> <option value="9">b-5</option> </select> <select name="type" id="type3"> <option value="10">c-1</option> <option value="11">c-2</option> <option value="12">c-3</option> <option value="13">c-4</option> </select> <select name="type" id="type4"> <option value="14">d-1</option> <option value="15">d-2</option> <option value="16">d-3</option> </select> <script type="text/javascript"> $(document).ready(function () { $('#mainDD').on('change', function() { console.log($(this).val()); console.log($('#mainDD :selected').text()) ; var thisType = "type" + $(this).val(); for(i=1; i<5; i++) { var thisId = "type" + i; console.log(thisType + " " + thisId); if(thisType !== thisId) { $("#"+thisId).hide(); } else { $("#"+thisId).show(); } } }) }); </script> </body> </html>
と書きました。どうしてこんなことが起こっているのでしょうか?理想のアウトプットとしては
http://bashalog.c-brains.jp/14/05/28-121700.php
のような感じで、一番左のボタンを選択する(大項目を選べる)と、隣のボタンでそ大項目の中の小項目を選べるようなものにしたいです。
どう直せば良いのでしょうか?