javascript - 从数据属性获取输入值

Question

我在下面有这段代码，用户可以在其中选择 - 每个下拉选项都有不同的数据期限:

<div class="ten columns">
  <p class="slider-label">Loan Tenure (Years)</p>
  <!-- <input type="text" class="loan-tenure numeric-only" /> -->
  <div class="field">
    <div class="picker picker-dd2">
      <select class="dropdown2 loan-tenure">
        <option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
        <option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
        <option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
        <option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
        <option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
      </select>
    </div>
  </div>
</div>

我想要的是将输入值设置为上面的数据保留 - :

                <input type="hidden" class="loan-rate" value="??" />

我需要将 onchange() 函数添加到上面的下拉列表中吗？

Answer 1

编辑、更新

I meant - getting the data-tenure and this will be the input value. So if the user selects 1, the input value will be 0.0298. If the user selects 2 the input value will be 0.0387

您可以在 .dropdown2 元素、document.querySelector() 和选择器 "input.loan-rate 中使用 change 事件"，在 change 事件处理程序中使用 event.target Element.dataset 设置 .value 属性

document.querySelector(".dropdown2").addEventListener("change", function(event) {
  // set value here   
  document.querySelector("input.loan-rate")
  .value = event.target.dataset.tenure; 
})