새로운 옵션에서 배열을 필터링하여 새로운 옵션을 반환합니다.

Question

일부 기존 코드를 지원하고 새로운 기능을 구현하는 데 몇 가지 문제가 있습니다.

두 개의 선택 옵션이 있습니다. 첫 번째는 상태 목록을 표시하고 두 번째는 도시 목록을 보여줍니다. 첫 번째 선택에서 선택한 상태에 따라 도시 목록이 필터링됩니다.

현재 도시는 선택 옵션에 관련 옵션을 첨부하기 위해 if 문에서 사용되는 javascript 배열에 포함되어 있습니다.이 옵션은 단일 상태 선택에서만 작동합니다.

여러 주 선택에서 도시를 필터링하려면 어떻게해야합니까?

많은 행운과 함께 if 문 조합을 시도했습니다. 내 jquery 지식은 분명히 부족하고 구글/stackoverflow에서 비슷한 아무것도 발견하지 못했습니다 - 그러나 나는 잘못된 각도에서 접근 수 있습니다 감사합니다.

<form name="newform"> 
<select multiple size="10" name="getStateSelect" id="getStateSelectID" onchange="GetSeries(document.newform.getStateSelect.options [document.newform.getStateSelect.selectedIndex].value);"> 
    <option value="1">Alaska</option> 
    <option value="2">Arizona</option> 
    <option value="3">Californa</option> 
</select> 
<br /> 
<br /> 
<select id="getCitySelect" multiple="multiple" size="10"></select> 
</form> 


var fsArray = [{id: 1,stateid: 1,cityname: "Anchorage"}, 
    {id: 2,stateid: 1,cityname: "Fairbanks"}, 
    {id: 3,stateid: 1,cityname: "Wasilla"}, 
    {id: 4,stateid: 2,cityname: "Flagstaff"}, 
    {id: 5,stateid: 2,cityname: "Phoenix"}, 
    {id: 6,stateid: 2,cityname: "Tucson"}, 
    {id: 7,stateid: 3,cityname: "Fremont"}, 
    {id: 8,stateid: 3,cityname: "Lakeport"}, 
    {id: 9,stateid: 3,cityname: "Los Angeles"}]; 

function GetSeries(i) { 
var SeriesSelectBox = document.getElementById("getCitySelect"); 
SeriesSelectBox.options.length = 0; 

for (j in fsArray) { 
    if (fsArray[j].stateid == i) { 
     var seriesLength = SeriesSelectBox.options.length; 
     SeriesSelectBox.options[seriesLength] = new Option(fsArray[j].cityname, fsArray[j].id); 
    } 
} 
} 

http://jsfiddle.net/fcp3h7mw/1/

어떤 도움이 크게 감사합니다! 감사합니다.

Answer 1

방금 ​​선택한 상태에 대한 각 요소가 선택되면 getStateSelectID 값에 for 루프가 추가되어 루프를 실행하여 도시를 추가합니다.

바이올린 : http://jsfiddle.net/fcp3h7mw/5/

자바 스크립트 :

var fsArray = [ 
    {id:1,stateid:1,cityname:"Anchorage"}, 
    {id:2,stateid:1,cityname:"Fairbanks"}, 
    {id:3,stateid:1,cityname:"Wasilla"}, 
    {id:4,stateid:2,cityname:"Flagstaff"}, 
    {id:5,stateid:2,cityname:"Phoenix"}, 
    {id:6,stateid:2,cityname:"Tucson"}, 
    {id:7,stateid:3,cityname:"Fremont"}, 
    {id:8,stateid:3,cityname:"Lakeport"}, 
    {id:9,stateid:3,cityname:"Los Angeles"} 
]; 

function GetSeries(i) {  
    var id = document.getElementById("getStateSelectID"); 
    var SeriesSelectBox = document.getElementById("getCitySelect"); 
    SeriesSelectBox.options.length = 0;  
    var states = 0; 

    for (states=0; states < id.length; states++) { 
     if(id[states].selected){ 
      for (j in fsArray) { 
       if (fsArray[j].stateid == id[states].value) { 
        var seriesLength = SeriesSelectBox.options.length; 
        SeriesSelectBox.options[seriesLength] = new Option(fsArray[j].cityname, fsArray[j].id);  
       } 
      } 
     } 
    } 
} 

마크 업 : 나는 또한,

<select multiple size="10" name="getStateSelect" id="getStateSelectID" onchange="GetSeries();"> 

Answer 2

여러 주를 선택하고 올바른 도시를 표시 할 수 있도록 코드를 업데이트했습니다.

기본적으로, 당신은 "선택"속성과 옵션의 목록을 가져올 수 및 배열에 옵션 값을 (onchange를) 이후

, 당신은의 값에 대한 새로운 배열과 일치를 반복 것 저장할 필요 배열 하나의 값 대신. 이 도움이 http://jsfiddle.net/biz79/fcp3h7mw/3/

var fsArray = [ 
    {id:1,stateid:1,cityname:"Anchorage"}, 
    {id:2,stateid:1,cityname:"Fairbanks"}, 
    {id:3,stateid:1,cityname:"Wasilla"}, 
    {id:4,stateid:2,cityname:"Flagstaff"}, 
    {id:5,stateid:2,cityname:"Phoenix"}, 
    {id:6,stateid:2,cityname:"Tucson"}, 
    {id:7,stateid:3,cityname:"Fremont"}, 
    {id:8,stateid:3,cityname:"Lakeport"}, 
    {id:9,stateid:3,cityname:"Los Angeles"} 
]; 

function getSeries() {  
    var SeriesSelectBox = document.getElementById("getCitySelect"); 
    SeriesSelectBox.options.length = 0;  

    var arr = getStateSelected(); 

    for (var i = 0; i< arr.length; i++) { 

     for (var j in fsArray) { 
      if (fsArray[j].stateid == arr[i]) { 
       var seriesLength = SeriesSelectBox.options.length; 
       SeriesSelectBox.options[seriesLength] = new Option(fsArray[j].cityname, fsArray[j].id);  
      } 
     } 
    } 
} 

function getStateSelected() { 
    var sel = document.querySelectorAll('#getStateSelectID option'); 
    var arr = []; 

    for (var i = 0; i< sel.length; i++) { 
     if (sel[i].selected) { 
      arr.push(sel[i].value); 
     } 
    } 
    return arr; 
} 

희망 :

다음은 업데이트 된 코드입니다. 질문이 있으면 알려주세요.