基於在另一個下拉菜單中選擇的內容在下拉菜單中顯示選項

Question

我想基於在另一個下拉菜單中已經選擇的內容在下拉菜單中顯示選項。我在第一個下拉菜單中有16個選項，所以我想在第一個下拉菜單的第二個下拉菜單中顯示不同的選項。我想使用JavaScript或jQuery來做到這一點。

這是第一個下拉在我的HTML文件：

  <div> 
       <label for="failureReason">Failure Reason:</label> <select 
        id="failureReason" data-theme="a" data-icon="arrow-d" data-iconpos="right"> 
        <option value="1">Damage</option> 
        <option value="9">Calibration Failure</option> 
        <option value="5">Component Failure</option> 
        <option value="93">Customer Request</option> 
        <option value="5">Error on Potted SUT</option> 
        <option value="41">Installation Error</option> 
        <option value="6">Interference</option> 
        <option value="46">Network Issue</option> 
        <option value="3">No Fault Found</option> 
        <option value="8">No Power/Fuse Blown</option> 
        <option value="23">Non-AMCS Issue</option> 
        <option value="49">OBC HW Issue</option> 
        <option value="30">OBC SW Issue</option> 
        <option value="2">Training Issue</option> 
        <option value="68">Truck Not Available</option> 
        <option value="51">Routine Maintenance</option> 
       </select> 
       <!-- Put in options for failure reason --> 
      </div> 

我想顯示根據什麼被選中已經爲「失敗原因」這個下拉內部不同的選項：

<div> 
       <label for="solutionId">Solution Id:</label> <select 
        id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right"> 
        <option value="1">Repaired</option> 
        <option value="2">Restarted</option> 
        <option value="3">Reinstalled Software</option> 
        <option value="4">Replaced Loadcell</option> 
        <option value="5">Replaced SUT</option> 
       </select> 
       <!-- Put in options for Solution Id --> 
      </div> 

我見過其他的例子，但沒有像我想要實現的。我需要能夠獲得顯示和選擇用於我的JavaScript文件的其他部分的任何選項的「值」。

編輯：

我意識到我的問題有點混亂。我會盡量更清楚。 如果選擇了失敗的原因「損害」，我想表明：

<div> 
      <label for="solutionId">Solution Id:</label> <select 
       id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right"> 
       <option value="1">Repaired</option> 
       <option value="3">Reinstalled Software</option> 
       <option value="4">Replaced Loadcell</option> 
      </select> 
      <!-- Put in options for Solution Id --> 
     </div> 

但如果選擇「校準失敗」，我想表明：

<div> 
      <label for="solutionId">Solution Id:</label> <select 
       id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right"> 
       <option value="1">Repaired</option> 
       <option value="2">Restarted</option> 
       <option value="5">Replaced SUT</option> 
      </select> 
      <!-- Put in options for Solution Id --> 
     </div> 

Answer 1

JS提琴的解決方案：

http://jsfiddle.net/ZjhWV/1/

不是最好的解決方案，但工作之一。從第一個選擇中製作一些文本內容列表，並將它們與第二個選項中的可用選項鍊接起來。

我使用了第一個textContent，並將它與第二個選項值相鏈接。但是你可以根據選項的不同屬性（id，value，text content ...）建立鏈接。

您可以通過this.options[this.selectedIndex].textContent從當前選定的選項中獲取文本內容。

PS：如果數組是空的，所有的選項都可以...

的javascript：

var subselectContains = { 
    "Damage": [1, 3, 5], 
     "Calibration Failure": [], 
     "Component Failure": [2], 
     "Customer Request": [], 
     "Error on Potted SUT": [1], 
     "Installation Error": [], 
     "Interference": [], 
     "Network Issue": [], 
     "No Fault Found": [], 
     "No Power/Fuse Blown": [], 
     "Non-AMCS Issue": [], 
     "OBC HW Issue": [], 
     "OBC SW Issue": [], 
     "Training Issue": [], 
     "Truck Not Available": [], 
     "Routine Maintenance": [] 
}; 

var failureReson = $("#failureReason"); 
var solutionOptions = $("#solutionId option"); 


failureReson.change(function() { 
    var visibleOptions = subselectContains[this.options[this.selectedIndex].textContent]; 

    if (visibleOptions.length != 0) { 
     solutionOptions.hide(); 


     solutionOptions.each(function() { 
      for (var i = 0; i <= visibleOptions.length; i++) { 
       if (this.value == visibleOptions[i]) { 
        $(this).show(); 
       } 
      } 
     }); 
    } else { 
     solutionOptions.show(); 
    } 
}); 

編輯：我的解決方案僅僅是一個短版。它僅在您更改第一次選擇時起作用，並且不會影響當前選定的選項。但我相信你可以自己解決這個問題;）

Answer 2

使用上的一個.change事件第一降了下來，抓住價值，以及你所需要的：

$("#failureReason").change(function() { 
    var selected = this.value; 
    var second = $("#solutionId option:selected").val(); 
}); 

Answer 3

首先你必須定義組合。

var combinations = { 
    "option1": ["option1-a", "option1-b", "option1-c"], 
    "option2": ["option2-a", "option2-b", "option2-c"], 
    "option3": ["option3-a", "option3-b", "option3-c"] 
} 

因此，在您第一個下拉您將添加一個.change事件會發現新的價值，然後填寫第二個下拉與這些選項。

$('#failureReason').change(function(){ 
    var template = '<option>Solutions</option>'; // will hold html for second drop down. 

    solutions = combinations[$(this).val()]; 
    $.each(solutions, function(i, solution){ 
     template += '<option value="' + solution + '">' + solution + '</option>' 
    }); 

    $('#solutionId').html(template); 
}); 

如果您會注意到，我只是給出了每個選項與顯示的文本相同的值。爲每個選項設置一個自定義值將會非常簡單。

的jsfiddle： http://jsfiddle.net/2hwp9/

Answer 4

希望你已經得到了答案，但它是一個簡單的答案。檢查這篇文章我沒有評論，所以張貼爲答案。檢查這個答案它的好和清楚。

Javascript change drop-down box options based on another drop-down box value