javascript - 选择选项时更改输入的占位符

Question

我一直在尝试一些 jQuery 编码，但似乎不起作用。在 #vat 输入中，我需要更改占位符。

    <select id="VatExpense">
        <option value="" disabled selected></option>
        <option value="0"></option>
        <option value="1"></option>
        <option value="0"></option>
        <option value="0"></option>
        <option value="1"></option>
    </select>

   <input type="text" id="vat" placeholder="Rate">

Answer 1

您应该使用 data- 属性，而不是 value 来确定费率。

Demo fiddle

HTML:

<select id="VatExpense">
    <option data-rate="20" value="" disabled selected>Expense Type</option>
    <option data-rate="20" value="0">Telephone</option>
    <option data-rate="0" value="1">Public Transport & Taxis</option>
    <option data-rate="20" value="2">Computer Consumables</option>
    <option data-rate="20" value="3">Subsistence</option>
    <option data-rate="0" value="4">Overseas Travel</option>
</select>

然后在 jQuery 中读取它们并相应地更改占位符。

脚本:

<script type="text/javascript">
   $(function(){
      $("#VatExpense").change(function(){
         $("#vat").attr("placeholder", $(this).find(":selected").data("rate") + "%");
      });
   });
</script>