使用jquery修改後續下拉列表

Question

我有一個帶有多個下拉列表的Web表單。我只想在第二個列表中顯示與第一個列表中的選擇共享相同值的選項。

<!-- Dropdown #1 --> 

<div class="control-group"> 
      <label class="control-label" for="select01">Select Tier</label> 
      <div class="controls"> 
       <select id="select01"> 
       <option value="all">All Tiers</option> 
       <option value="db">Database Tier</option> 
       <option value="app">Application Tier</option> 
       <option value="web">Web Tier</option> 
       </select> 
      </div> 
      </div> 


<!-- Dropdown #2 --> 

<div class="control-group"> 
      <label class="control-label" for="select01">Select Audit Point</label> 
      <div class="controls"> 
       <select id="select03"> 
       <option value="all">Software Version</option> 
       <option value="all">Server OS, Memory, CPU</option> 
       <option value="all">High Availability</option> 
       <option value="db">DBMS Version</option> 
       <option value="db">DBMS Statistics</option> 
       <option value="db">DBMS Parameters</option> 
       <option value="db">DBMS Data File Growth</option> 
       <option value="db">Database Disk Structure</option> 
       <option value="db">Long Running SQL</option> 
       <option value="db">Security Data Growth Range</option> 
       <option value="db">Extraneous entries in System Tables</option> 
       <option value="db">Feed Error Orphans</option> 
       <option value="db">Position Detail Orphans</option> 
       <option value="db">Data Retention Policy</option> 
       <option value="db">Securities Added Daily</option> 
       <option value="db">Security Master Load</option> 
       <option value="db">SRM Purge</option> 
       <option value="db">Best Pricing Purge</option> 
       <option value="db">Partitioning</option> 
       <option value="db">DBMS Data/Log File Utilize Shared Disk</option> 
       <option value="db">DBMS Failover</option> 
       <option value="app">DBMS Client Version</option> 
       <option value="app">Star Engine IP Configuration</option> 
       <option value="app">Engine Count/Configuration</option> 
       <option value="app">STAR Engine Logging Interval</option> 
       <option value="app">PACE Engine Port Configuration</option> 
       <option value="app">PACE Server Logging</option> 
       <option value="app">PACE Engine Log Configuration</option> 
       <option value="app">STAR Engine Load Balancer Interval</option> 
       <option value="app">Engines Restarted Weekly</option> 
       <option value="app">Designated Master</option> 
       <option value="app">Cluster Managers Identical</option> 
       <option value="app">Uploader Shared Disk Space</option> 
       <option value="app">Custom Archive Rule Shared Disk Space</option> 
       <option value="app">App Server Clustering</option> 
       <option value="app">PACE Event Concurrency</option> 
       <option value="web">Homogenous Engine Configuration</option> 
       <option value="web">Log Levels</option> 
       <option value="web">Scheduler Purging</option> 
       <option value="web">Web Server Services Restarted Weekly</option> 
       <option value="web">Email Notification Basic Configuration</option> 
       <option value="web"n>Web Load Balancer Configuration</option> 
       <option value="web">Load Balancer Customizations</option> 
       <option value="web">Portal Shared Disk Space</option> 
       <option value="web">Message Center Shared Disk Space</option> 
       <option value="web">Message Center ID'S</option> 
       <option value="web">Schedule Service Config</option> 
       <option value="web">ePace is a client of Clustered App Servers</option> 
       <option value="web">Portal is a client of Clustered App Servers</option> 
       <option value="web">ESTAR is a client of Clustered Load Balancers</option> 
       <option value="web">ESTAR is a client of Clustered Engines</option> 
       <option value="web">ESTAR is a client of Clustered Report Export Services</option> 
       <option value="web">WebSync Configured</option> 
       <option value="web">Web Server Load Balancing Configured</option> 
       <option value="web">Shared Disk Dynamic Folder</option> 

我需要能夠連續地改變列表1選擇，所以我不能在第二列表一個.remove（）無法比擬的選項。如果我刪除了它們，那麼我需要重新填充第一個列表中每個新選擇的第二個列表。

謝謝你的幫助。

Answer 1

我與你的HTML代碼測試，工作正常...你只需要修改這個代碼，以便加載頁面的時候會有一個篩選的選擇。

jQuery(document).ready(function() { 
    var savedOptions = ''; 

    savedOptions = jQuery('#select03').html(); //save the second dropdown-list 

    jQuery('#select01').change(function() { 
     var selectedValue = jQuery('#select01').val(); //After changing the value of the first dropdown, store this value inside a variable 

     jQuery('#select03').html(savedOptions); //restore the content of the 2nd dropdown 
     jQuery('#select03').children('option').each(function() { 
      if(jQuery(this).attr('value') != selectedValue) { 
       jQuery(this).remove(); //Compare and step through the 2nd dropdown and delete all unneccessary options 
      } 
     }); 
    }); 
}); 

Answer 2

您在選擇元素內不能有重複的選項值。

最好你有一個單獨的元素，包含選項標籤。然後用data-value屬性替換value。

試試這個

$('#select01').on('change', function() { 

    var $select03 = $('#select03'), 
     currValue = this.value; 

    $select03.empty(); 

    var $options = $('.template option').filter(function() { 
      return $(this).data('value') === currValue 
    }).get(); 

    $select03.append($options); 
}).change(); 

Working Fiddle

Answer 3

您可以禁用像這樣的選項：

$("#select01").change(function() { 
    //Get value from the selected option 
    var filter = this.value; 

    //Loop thru second select options 
    $("#select02 option").each(function() { 
     //Enable the option (used for if the select changes values) 
     $(this).prop("disabled", false); 

     //Compare second select values to the initial selected value 
     if (this.value != filter) { 

      //Disable options that do not match 
      $(this).prop("disabled", true); 
     } 
    }); 
}); 

演示：http://jsfiddle.net/QXhRy/

我想你也可以完滿成功ely刪除選項，但是，這將涉及每次更改初始下拉列表時重新構建select。

Answer 4

根據需要創建字符串數組的「映射」並從中填充。

// initialize options on page load 
var options = new Array(); 
options["all"] = new Array("A","B","C"); 
options["db"] = new Array("D","E","F"); 

function changeSecondDropDown(selectedValue) 
{ 
    // clear options from second drop down list 
    ... 

    var optionsToAdd = options[selectedValue] 
    // loop through options and add them to second drop down list 
    ... 
}