どのように私は2つのドロップダウンリストからデータを一致させることができます

Question

私はdatabase.nowから2つのドロップダウンリストを持っています私は最初のドロップダウンリストを選択すると2番目のドロップダウンリストからデータをフィルタリングする方法私はそれを行うことができますか？

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>