입력을 기반으로 For 루프에서 객체 선택

Question

이전에 선택한 옵션 값을 기반으로 선택 옵션을 채 웁니다.

  <label for="state" class="block">State:*</label> 
      <select name="state" id="state" tabindex="1"> 
       <option value="Arizona">Arizona</option> 
       <option value="Arkansas">Arkansas</option> 
       <option value="Colorado">Colorado</option> 
      </select> 

      <label for="location" class="block">Preferred Location:*</label> 
      <select name="location" id="location" tabindex="2"> 
       <option value=""></option> 
      </select> 

Thats my html. 지금 나는 js를 가지고 있으며 작동하지만, 나는 더 심한 방법이 있는지 궁금해하고있다.

 var State = $('#state').val(); 
     var Location = $('#location'); 



     setOptions(State); 

     function setOptions(chosen){ 

     var Location=document.myform.location; 
     Location.options.length=0; 

     var Arizona = { 
     0 : 'Select Location', 
     3 : 'Phoenix (Chandler)', 
     4 : 'Scottsdale', 
     5 : 'Tuscon' 
     }; 

     var Arkansas = { 
     2 : 'Little Rock' 
     };   

     var Colorado = { 
     6 : 'Colorado Springs' 
     }; 




     if(chosen=="Arizona"){    
     var myobject = Arizona; 
     } 

     if(chosen=="Arkansas"){ 
     var myobject = Arkansas; 
     } 

     if(chosen=="Colorado"){   
     var myobject = Colorado; 
     } 

     for(index in myobject) { 
       Location.options[Location.options.length]=new Option(myobject[index], index); 
     } 

다른 선택 상자를 기반으로 어떤 개체를 사용할지를 알 수있는 방법이 있습니까?

감사합니다.

Answer 1

를 사용하여 중첩 된 객체 :

var locations = { 
    Arizona: { 
     0 : 'Select Location', 
     3 : 'Phoenix (Chandler)', 
     4 : 'Scottsdale', 
     5 : 'Tuscon' 
    }, 
    Arkansas: { 
     2 : 'Little Rock' 
    }, 
    Colorado: { 
     6 : 'Colorado Springs' 
    } 
}; 

var myobject = locations[chosen]; 
for(index in myobject) { 
    Location.options.push(new Option(myobject[index], index)); 
}