正在从数据属性获取输入值

Getting input value from a data attribute

本文关键字：输入 获取 数据属性      更新时间：2023-09-26

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

<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（）函数吗？

编辑、更新

我的意思是——获得数据保有权，这将是输入值。所以如果用户选择1，则输入值将为0.0298。如果用户选择2，则输入值将为0.0387

您可以在.dropdown2元素中使用change事件，document.querySelector()与选择器"input.loan-rate"一起使用，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; 
})

 <select class="dropdown2 loan-tenure" id="selectId">
    <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>
  $(document).ready(function(){
    $("#selectId").change(function(){
     alert($("#selectId option:selected").attr("data-tenure"));
      alert($("#selectId").val());
  });
});

尝试以下代码。在这里，我们通过onchange事件传递对象。

<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 onchange="tenure_rates(this)" 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>
<script type="text/javascript">
    function tenure_rates(dropdownValue) {
       $('.dropdown2-opt').data('tenure',dropdownValue.value);
    }
</script>

为什么不使用select标记获取输入

<select name="" form="tenureform">
  <option value="">1</option>
  <option value="">2</option>
  <option value="">3</option>
  <option value="">4</option>
</select>

<select onchange="changeInput()" 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>
function onChange(evt) {
    document.querySelector("input.loan-rate").dataset.tenure = evt.currentTarget.value;
}

这是一个普通的js解决方案。可能会有大量的jquery响应。您确实需要onchange事件：

<select class="dropdown2 loan-tenure" onchange="document.getElementById('loanrate').value = this.options[this.selectedIndex].dataset.tenure">

请确保将id"loadrate"添加到您的输入中。请在此处查看它的实际操作。

您可以使用selectedIndex来获取当前选定的选项。然后使用getAttribute获取data-tenure属性值。使用getElementsByClassName选择隐藏的输入元素并设置其值。

function tenure_rates(){
var e = document.getElementById("dropdown2");
var _option = e.options[e.selectedIndex].getAttribute('data-tenure');
document.getElementsByClassName('loan-rate')[0].value = _option;
}

JSFIDDLE

注意：最初隐藏字段的值将始终为空，因为1是预先选择的。因此，如果用户不更改选项，您将永远找不到任何设置此隐藏元素的值。您可以选择类似Select 的选项

试试看：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="ten columns">
    <input type="hidden" class="loan-rate" value="" />
  <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>
    <script>
        var sel = document.querySelector(".loan-tenure");
        var hidEle = document.querySelector(".loan-rate");
        sel.onchange = function(){
            var value = sel.value;
            hidEle.setAttribute("value",value);
            alert("Input hidden value is : " + hidEle.getAttribute("value"));
        }
    </script>
</body>
</html>

相关文章：