JQM을 사용하여 이전 선택 값을 기준으로 선택 옵션 변경

Question

첫 번째 선택 드롭 다운에서 선택한 내용에 따라 두 번째 선택 드롭 다운에서 옵션을 변경하려고합니다. 나는 이것을 정규 JS로 해왔지만, JQM에서 더 좋은 방법을 원했다.

나는이 같은 모든 옵션을 사용하여 개체가 있습니다

var options = { 
    blah1: ["A", "B", "C"], 
    blah2: ["D", "E", "F"], 
    blah3: ["G", "G", "I"] 
}; 

나는이 선택 입력이 있습니다

여기

<select value="firstSelect"> 
    <option value="blah1">Blah1</option> 
    <option value="blah2">Blah2</option> 
    <option value="blah3">Blah3</option> 
</select> 

<select value="secondSelect"> 
</select> 

내가 현재 내 main.JS에있는 것입니다 :

$('#firstSelect').change(function() { 
    var x= $('#secondSelect').val() 
    for(index in options[x]) { 
     $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>') 
    }; 
}); 

첫 번째 선택 드롭 다운에서 blah1을 선택하면 두 번째 선택 드롭 다운에 optio가 채워집니다 ns.blah1 값. 다음은 blah2 및 blah3과 동일합니다. 그것이 내가 일하려고하는 생각입니다.

JQM을 사용하지 않고 비슷한 버전의 작업이 있었지만 지금은 이해할 수 없습니다. 누구나 도움이 될 수 있습니까?

은 사전에 감사합니다.

편집 : 알아 냈습니다! 전체 블록을 닫기 전에 끝에 $('#secondSelect').selectmenu('refresh', true);을 추가해야했습니다. 그것은 작동하고 있었고, 업데이트하기 위해 두 번째 선택 드롭 다운을 새로 고쳐야했습니다. 희망이 사람을 도움이됩니다.

그건 그렇고, 나는 내 자신의 질문에 대답 할 수 없어, 나는이 편집을 추가했다. 누구나 자유롭게 대답 할 수 있습니다.

Answer 1

기본적으로 잘못된 이름을 많이 지정했습니다. HTML에 id 대신 value을 사용했습니다. firstSelect 대신 val()이 secondSelect입니다.

HTML

<select id="firstSelect"> 
<option value="blah1">Blah1</option> 
<option value="blah2">Blah2</option> 
<option value="blah3">Blah3</option> 
</select> 

<select id="secondSelect"> 
</select>​ 

먼저 코드에서 몇 가지 오류입니다 자바 스크립트

var options = { 
    blah1: ["A", "B", "C"], 
    blah2: ["D", "E", "F"], 
    blah3: ["G", "G", "I"] 
}; 

$(function() { 
    $('#firstSelect').change(function() { 
     var x = $('#firstSelect').val() 
     for (var index in options[x]) { 
      $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>') 
     }; 
    }); 
});​ 

Answer 2

좋아

, ...

1. , 당신의 선택 요소 ID 속성이없는, "ids"를 값이라는 속성에 넣습니다.
2. 둘째, javas에서 cript 함수를 사용하면 select1에서 잘못된 값으로 올바른 값을 얻으려고합니다. 올바른 형식은 $('#firstSelect :selected').val()
3. 입니다. .append() 메서드를 사용하면 이전 html을 지우지 않아도됩니다. .append() 방법을 사용하기 전에 여기

가 기능적 예와 jsfiddle이다 ... .html("")를 사용한다.