jquery實現二級聯動
阿新 • • 發佈：2018-12-15
這兩天一直在看jquery實現二級聯動於是自己結合網上的編寫了一個小demo
程式碼如下：首先引入jquery
其次編寫頁面:
<body>
<select id="checkE">
<option value="">請選擇種類</option>
</select>
<select id="checkFood">
<option>請選擇食物</option>
</select>
</body>
然後編寫js
<script type="application/javascript" src="../js/jquery-1.9.1.min.js"></script> <script type="application/javascript"> $(function(){ //頁面載入完畢後開始執行的事件 var checkE='{"水果":["蘋果","香蕉","橘子"],"蔬菜":["白菜","豆芽","土豆"]}'; var kind=eval('('+checkE+')');//計算某個字串，並執行其中的的 JavaScript 程式碼 for (var key in kind) { $("#checkE").append("<option value='"+key+"'>"+key+"</option>"); } $("#checkE").change(function(){ var checkEval=$(this).val(); $("#checkFood").html('<option value="">請選擇食物</option>'); for(var k in kind[checkEval]) { var now_food=kind[checkEval][k]; $("#checkFood").append('<option value="'+now_food+'">'+now_food+'</option>'); } }); }); </script>