使用下拉菜单

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'/>

希望这有帮助。