드롭 다운 메뉴에서 선택하여 가격을 설정

Question

dropdown을 사용하여 상품 가격을 설정할 수있는 방법 메뉴는 자동차와 트럭이있는 드롭 다운 메뉴가 있으며 사용자가 가격을 선택하는 방법에 따라 달라질 수 있습니다. 각 항목의 가격을 포함하는 상자를 업데이트하십시오.

<p><b>Truck: &nbsp;&nbsp;&nbsp;</b><select id="states" name="states" size="1"> 
 
     <option>Please Choose</option> 
 
     <option value="F150">F150</option> 
 
     <option value="Ram1500">Ram1500</option> 
 
     <option value="chevy">chevy</option> 
 
     
 
</select><br /></p><p><b>sports car: &nbsp;&nbsp;&nbsp;</b><select id="states" name="states" size="1"> 
 
     <option>Please Choose</option> 
 
     <option value="mustang">mustang</option> 
 
     <option value="charger">charger</option> 
 
     <option value="camaro">camaro</option> 
 
     
 
</select><br /></p>

Answer 1

가격 uzing data-* 속성에 대한 추가 속성을 추가 한 후 변화에이 속성의 값을 취득하고 가격 필드에서 그것을 보여

$('body').on('change', '#trucks', function(){ 
 
    var selected_truck_price = $('option:selected', this).data('price'); 
 
    
 
    $('#price').val(selected_truck_price); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <b>Truck: &nbsp;&nbsp;&nbsp;</b> 
 
    <select id="trucks" name="trucks" size="1"> 
 
    <option>Please Choose</option> 
 
    <option data-price="150" value="F150">F150</option> 
 
    <option data-price="1500" value="Ram1500">Ram1500</option> 
 
    <option data-price="2000" value="chevy">chevy</option> 
 
    </select> 
 
    <br/> 
 
</p> 
 

 
Price : <input name='price' id='price'/>

희망이 도움이됩니다.