다른 드롭 다운에서 선택한 항목을 기반으로 드롭 다운의 옵션 표시

Question

다른 드롭 다운 메뉴에서 이미 선택된 항목을 기반으로 드롭 다운 메뉴에 옵션을 표시하려고합니다. 첫 번째 드롭 다운에 16 개의 옵션이 있으므로 첫 번째 드롭 다운에서 두 번째 드롭 다운에 다른 옵션을 표시하려고합니다. 자바 스크립트 또는 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> 

을

다른 예제를 보았지만 달성하려는 것과 다른 점은 없습니다. 나는 옵션의 "가치"를 표시하고 자바 스크립트 파일의 다른 부분에서 사용하도록 선택할 수 있어야합니다.

편집 :

나는 약간의 혼란을 알고 있습니다. 나는 더 명확하게하려고 노력할 것이다.

<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 바이올린 솔루션 :

,536,

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

최상의 해결책은 아니지만 작동하는 방법입니다. 첫 번째 선택에서 텍스트 내용의 일부 목록을 만들고 두 번째 옵션에서 사용 가능한 옵션과 링크하십시오.

첫 번째 텍스트 항목을 사용하고 두 번째 항목의 옵션 값과 연결했습니다. 그러나 옵션의 다른 속성 (id, value, text content ...)을 기반으로 링크를 만들 수 있습니다.

this.options[this.selectedIndex].textContent으로 현재 선택된 옵션의 텍스트 콘텐츠를 가져올 수 있습니다.

추신 :

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 이벤트를 "교정 실패"를 선택한 경우

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

그러나

, 내가 보여주고 싶은 : "손상"실패 이유를 선택하면 , 내가 보여주고 싶은 첫째, 드롭 다운 값을 잡아, 당신은 무엇을해야 :

$("#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