jQuery实现下拉框联动

最新推荐文章于 2025-07-03 16:16:28 发布

viviLee2016

最新推荐文章于 2025-07-03 16:16:28 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/viviLee2016/article/details/90454156

这篇博客展示了如何利用jQuery实现下拉框之间的联动效果。通过遍历数据列表，根据选择的政策（policy）更新类别（category）的选项，并在类别选择改变时，动态加载对应的详细结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

   <body>
       <div class="mui-content">
           <label>policy:</label>
           <select id="idpolicy">
               <option>please select</option>
           </select>
           <label>category:</label>
           <select id="idcategory">
               <option>please select</option>
           </select>
           <ul id="idresult">
           </ul>
       </div>
   </body>
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript">
       var tempList = [{
           "policy": "0001",
           "category": "aaaa",
           "name":"apple"
       }, {
           "policy": "0001",
           "category": "bbbb",
           "name":"orange"
       }, {
           "policy": "0001",
           "category": "cccc",
           "name":"banana"
       }, {
           "policy": "0002",
           "category": "cccc",
           "name":"watermelon"
       }, {
           "policy": "0003",
           "category": "cccc",
           "name":"grape"
       }, {
           "policy": "0004",
           "category": "eeee",
           "name":"pineapple"
       }, {
           "policy": "0004",
           "category": "dddd",
           "name":"buleberry"
       }, {
           "policy": "0005",
           "category": "pppp",
           "name":"stawberry"
       }, {
           "policy": "0005",
           "category": "aaaa",
           "name":"pear"
       }]

var polObj = tempList;

       $(function() {
           //init Policy DropDown
           var initPolicyDropDown = function() {
               var newList = [];
               for(var i = 0; i < tempList.length; i++) {
                   var arrOne = tempList[i].policy;
                   var count = 0;
                   for(var j = i + 1; j < tempList.length; j++) {
                       var arrTwo = tempList[j].policy;
                       if(arrOne === arrTwo) {
                           count++;
                       }
                   }
                   if(count === 0) {
                       newList.push(arrOne);
                   }
               }
               console.log("the new list is---" + newList)
               var html_ = ''
               for(var k = 0; k < newList.length; k++) {
                   html_ += '<option value=' + newList[k] + '>' + newList[k] + '</option>';
               }
               $('#idpolicy').append(html_);
           }
           initPolicyDropDown();

           //find Category
           var findCategory = function(arr, polNo) {
               var categoryList = []
               for(var i = 0; i < arr.length; i++) {
                   if(arr[i].policy == polNo) {
                       categoryList.push(arr[i].category);
                   }
               }
               return categoryList;
           }

console.log(findCategory(polObj, '0001'));

           //search result
           var searchResult = function(arr, polNo, ctgNo) {
               var resultList = []
               for(var i = 0; i < arr.length; i++) {
                   if(arr[i].policy == polNo && arr[i].category == ctgNo) {
                       resultList.push(arr[i]);
                   }
               }
               return resultList;
           }
           console.log(searchResult(polObj, '0001', 'aaaa'));

           //policy change even
           $('#idpolicy').change(function() {
               var categoryResult = [];
               var selectedPol = $(this).children('option:selected').val();
               categoryResult = findCategory(polObj, selectedPol);
               var html_ = '<option>please select</option>';
               for(var i = 0; i < categoryResult.length; i++) {
                   html_ += '<option value=' + categoryResult[i] + '>' + categoryResult[i] + '</option>';
               }
               $('#idcategory').html(html_);
               $('#idcategory').change(function() {
                   $('#idresult').children().html('');
                   var selectedCty = $('#idcategory').children('option:selected').val();
                   var detailResult = searchResult(polObj, selectedPol, selectedCty);
                   var htmlDetails_ = ''
                   for(var j = 0; j < detailResult.length; j++) {
                       htmlDetails_ += '<li>' + detailResult[j].policy + '</li>' +
                           '<li>' + detailResult[j].category + '</li>'+
                           '<li>' + detailResult[j].name + '</li>'
                   }
                   $('#idresult').html(htmlDetails_);
               })

})

})
</script>

</html>