【问题标题】：jQuery, How to autofill text fields according to what's selected in select drop down menu?jQuery，如何根据选择下拉菜单中选择的内容自动填充文本字段？
【发布时间】：2011-10-13 04:01:28
【问题描述】：

Invoice 有一个 LineItems 列表。

LineItem 具有名称（在选择菜单中）、价格和数量属性。

如果用户想要添加至少 3 个订单项，则每张发票中默认有 3 个空订单项。

如果用户从选择下拉菜单中选择一个订单项，我希望数量默认为 1，并且该订单项的价格根据所选订单项自动填充。

我怎么能这样做？我正在谷歌上搜索答案，但找不到我要找的东西。

顺便说一句：我使用的是 Ruby 1.9.2 和 Rails 3.1.0

【问题讨论】：

我认为你想要研究的是当“$(selector).change() 事件”发生时，你会想要使用一个“:empty”选择器找到一个空白文本输入，并为您选择的选项找到一个 ":selected" 选择器。最后，您需要使用“$(selector).val()”方法来设置文本输入的值。我希望其中一些术语对您的谷歌搜索有所帮助。 :) 最后，我认为 RoR 可能会吓跑一些潜在的帮助，因为我认为您的问题实际上是严格的 jQuery。

标签： jquery forms

【解决方案1】：

在 html 5 中你可以这样做：

<head>
    <script type="text/javascript">
      $(document).ready(  function(){
       $("#lineItemsDD").change(function(event){
          var optionElem =$(this).find(":selected")[0];
          $(get the quantity input text box).val(optionElem.dataset.defaultQuantity);
          $(get the price input text box).val(optionElem.dataset.defaultPrice);
       });
      }
     );
    </script>
</head>
<body>
    <select name="lineItem" id="lineItemsDD">
    <option value='A' data-defaultQuantity='1' data-defaultPrice='12.50'>option A</option>
    <option value='B' data-defaultQuantity='1' data-defaultPrice='2.50'>option B</option>
    <option value='C' data-defaultQuantity='1' data-defaultPrice='1.50'>option C</option>
    </select>
</body>

否则，这样做：

<head>
    <script type="text/javascript">
      $(document).ready(  function(){
//get the default data, this may be an ajax call for you
       var defaultData = { "A":{"quantity":1,"price":12.50},"B":{"quantity":1,"price":2.50},"C":{"quantity":1,"price":1.50}};
// set the data into each option for use later.
       $("#lineItemsDD option").each(function(index, elem){
          $(this).data("defaultData", defaultData[$(this).val()]  );
       });
// if the user changes their option, set the new default data in the other inputs
       $("#lineItemsDD").change(function(event){
          var defaultData =$(this).find(":selected").data('defaultData');
          $(get the quantity input text box).val(defaultData.quantity);
          $(get the price input text box).val(defaultData.price);
       });
      }
     );
    </script>
</head>

【讨论】：

$(this).closest('.item').find('.qty').val(optionElem.dataset.defaultquantity);