i have two dropdown list from the database.now i want to do when i select first dropdown list it filter the data from second dropdown list how can i do that?
1条回答 默认 最新
- 普通网友 2016-10-13 06:12关注
You can do that with Multilevel Dependent Dropdown Plugin With jQuery - Dependent Dropdowns: http://www.jqueryscript.net/form/Multilevel-Dependent-Dropdown-Plugin-With-jQuery-Dependent-Dropdowns.html
Basic usage:
/* * Copyright Shorif Ali (http://github.com/shorifali/) * Licensed under MIT (https://opensource.org/licenses/MIT) * */ 'use strict'; $(document).ready(function() { $.extend($, { option: '<option value="0" selected="selected">Select Option</option>' }); // Method to clear dropdowns down to a given level $.extend($, { clearDropDown: function(arrayObj, startIndex) { $.each(arrayObj, function(index, value) { if(index >= startIndex) { $(value).html($.option); } }); } }); // Method to disable dropdowns down to a given level $.extend($, { disableDropDown: function(arrayObj, startIndex) { $.each(arrayObj, function(index, value) { if(index >= startIndex) { $(value).attr('disabled', 'disabled'); } }); } }); // Method to disable dropdowns down to a given level $.extend($, { enableDropDown: function(that) { that.removeAttr('disabled'); } }); // Method to generate and append options $.extend($, { generateOptions: function(element, selection, limit) { var options = ''; for(var i = 1; i <= limit; i++) { options += '<option value="' + i + '">Option ' + selection + '-' + i + '</option>'; } element.append(options); } }); // Select each of the dropdowns var firstDropDown = $('#first'); var secondDropDown = $('#second'); var thirdDropDown = $('#third'); // Hold selected option var firstSelection = ''; var secondSelection = ''; var thirdSelection = ''; // Hold selection var selection = ''; // Selection handler for first level dropdown firstDropDown.on('change', function() { // Get selected option firstSelection = firstDropDown.val(); // Clear all dropdowns down to the hierarchy $.clearDropDown($('select'), 1); // Disable all dropdowns down to the hierarchy $.disableDropDown($('select'), 1); // Check current selection if(firstSelection === '0') { return; } // Enable second level DropDown $.enableDropDown(secondDropDown); // Generate and append options selection = firstSelection; $.generateOptions(secondDropDown, selection, 4); }); // Selection handler for second level dropdown secondDropDown.on('change', function() { secondSelection = secondDropDown.val(); // Clear all dropdowns down to the hierarchy $.clearDropDown($('select'), 2); // Disable all dropdowns down to the hierarchy $.disableDropDown($('select'), 2); // Check current selection if(secondSelection === '0') { return; } // Enable third level DropDown $.enableDropDown(thirdDropDown); // Generate and append options selection = firstSelection + '-' + secondSelection; $.generateOptions(thirdDropDown, selection, 4); }); // Selection handler for third level dropdown thirdDropDown.on('change', function() { thirdSelection = thirdDropDown.val(); // Final work goes here }); /* * In this way we can make any number of dependent dropdowns * */ });
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <div class="form-group"> <label for="first">First Level Dropdown</label> <select id="first" class="form-control" role="listbox"> <option value="0" selected="selected">Select Option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> </div> <div class="form-group"> <label for="second">Second Level Dropdown</label> <select id="second" class="form-control" role="listbox"><option value="0" selected="selected">Select Option</option><option value="1">Option 1-1</option><option value="2">Option 1-2</option><option value="3">Option 1-3</option><option value="4">Option 1-4</option></select> </div> <div class="form-group"> <label for="third">Third Level Dropdown</label> <select id="third" class="form-control" role="listbox"><option value="0" selected="selected">Select Option</option><option value="1">Option 1-2-1</option><option value="2">Option 1-2-2</option><option value="3">Option 1-2-3</option><option value="4">Option 1-2-4</option></select> </div> </div> </div>
</div>
解决 无用评论 打赏 举报
悬赏问题
- ¥15 一直显示正在等待HID—ISP
- ¥15 Python turtle 画图
- ¥15 关于大棚监测的pcb板设计
- ¥15 stm32开发clion时遇到的编译问题
- ¥15 lna设计 源简并电感型共源放大器
- ¥15 如何用Labview在myRIO上做LCD显示?(语言-开发语言)
- ¥15 Vue3地图和异步函数使用
- ¥15 C++ yoloV5改写遇到的问题
- ¥20 win11修改中文用户名路径
- ¥15 win2012磁盘空间不足,c盘正常,d盘无法写入