어떻게 두 개의 드롭 다운 목록에서 데이터를 일치시킬 수 있습니다

Question

나는 두 번째 드롭 다운 목록에서 데이터를 필터링 할 때 첫 번째 드롭 다운 목록을 선택할 때 database.now에서 두 개의 드롭 다운 목록을 가지고 있는데 어떻게 할 수 있습니까?

Answer 1

당신은 할 수 jQuery를 가진 다단계 종속 드롭 다운 플러그인과 - 종속 드롭 다운 : http://www.jqueryscript.net/form/Multilevel-Dependent-Dropdown-Plugin-With-jQuery-Dependent-Dropdowns.html

기본 사용법 :

/* 
 
* 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>