자바 스크립트를 사용하여 다음 선택 옵션 채우기

Question

그래서 3 가지 선택 옵션이 있습니다. 브랜드 모델 및 부품. 사용자가 브랜드를 클릭하면 다음 선택 옵션에서 해당 브랜드의 모델을 제공해야합니다. 예를 들면 : 나는 다음 선택 옵션을 채울 수있는 스크립트를 발견

Kawasaki: 
    -Curve 
    -Boxer 150 
    -CT100 
    -Fury 
Honda: 
    -BeAT 110 
    -Wave 
    -CB110 
    -TMX Supremo 

Suzuki: 
    -Nex 115 
    -Thunder 125 
    -Hayate 125 
    -Skydrive 125 

Yamaha: 
    -Mio 125 
    -Mio Soul 
    -Fino 
    -Vega 

, 나는 모델을 넣어 편집하려고 내부하지만 여기에 작업 스크립트를하지 : 여기

<script type="text/javascript"> 
$(function(){ 
    $("#Model").attr("disabled","true"); 
    $("#Brand").change(function(){ 
     if(this.value != ""){ 
      $('#Model').removeAttr('disabled'); 
      var brand = $("#Brand option:selected").text(); 
      document.getElementById("Model").options.length = 1; 
      for(var i = 0; i < 10 ;i++){ 
       var selectOption = document.createElement("OPTION"); 
       selectOption.text = brand + " Model No." + i; 
       document.getElementById('Model').appendChild(selectOption); 
      } 
$("#Model").selectmenu("refresh","true");    
     } 
     else{ 
      $("#Model").attr("disabled","true"); 
      $("#Model").val("");    
      $("#Model").selectmenu("refresh","true");  
     } 
    }); 
}) 
</script> 

그리고 내 양식은 다음과 같습니다.

<table> 
     <form style="position:absolute;left: 15%;top: 25%;" action="orderfilterbrand.php" method="post"> 
    <div class="stepsClass"><div id="mainselection"> 
    <h5>Choose Your Motorcycle Brand: </h5> 

       <select id="Brand" name="Brand"> 
      <option value = "">Motorcycle Brand</option> 
      <option value = "Kawasaki">Kawasaki</option> 
      <option value = "Honda">Honda</option> 
      <option value = "Suzuki">Suzuki</option> 
      <option value = "Yamaha">Yamaha</option> 
      </select> 
       </div></div> 
        <div class="stepsClass"><div id="mainselection"> 
        <h5>Choose Your Motorcycle Model: </h5> 
      <select id="Model" name="Model"> 
       <option>Motorcycle Model</option> 
      </select> 
         </div></div> 
        <div class="stepsClass"> 
        <div id="mainselection"> 
          <h5>Choose Your Motorcycle Exterior Part: </h5> 
      <select id="Part" name="Part"> 
      <option>Select Motorcycle Part</option> 
      <option>Muffler</option> 
      <option>Side Mirror</option> 
      <option>Windshield</option> 
      <option>Rim</option> 
      <option>Seat</option> 
      <option>Handle Bar</option> 
      </select> 
      <td><button class="btn btn-primary btn-lg" name="" type="submit">Search Part</button></td> 
    </div></div> 
</form> 
     </table> 

어떻게 모델을 스크립트에 넣을 수 있습니까? 사전 선생님의 및 ma'ams :

Answer 1

이

var map = { 
    Kawasaki: ['-Curve', '-Boxer 150', '-CT100', '-Fury'], 
    Honda : ['-BeAT 110', '-Wave', '-CB110', '-TMX Supremo'], 
    Suzuki : ['-Nex 115', '-Thunder 125', '-Hayate 125', '-Skydrive 125'], 
    Yamaha : ['-Mio 125', '-Mio Soul', '-Fino', '-Vega'] 
}; 

같은 값으로 액세스 할 수있는지도를 만들기 그런 다음이

$(function() { 
    $("#Model").prop("disabled", true); 
    $("#Brand").change(function() { 
     if (this.value in map) { 
     $('#Model').prop('disabled', false).empty(); 
     var brands = map[this.value]; 

     $.each(brands, function() { 
      $('#Model').append(
       $('<option />', {value : this, text : this}) 
      ); 
     }); 

     $("#Model").selectmenu("refresh", true); 
    } else { 
     $("#Model").prop("disabled", true).val("").selectmenu("refresh", true); 
    } 
    }); 
}); 

FIDDLE

처럼 사용할 수있는 Thnx