从数据属性获取输入值

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>

我想要的是将输入值设置为上面的data-tenure - :

                <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 元素上使用 change 事件，document.querySelector() 与选择器 "input.loan-rate"，设置 .value 属性与 event.target Element.dataset 在 change 事件处理程序

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

Answer 2

你为什么不使用 select 标签来获取输入

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

Answer 3

<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;
}

Answer 4

试试下面的代码。这里我们通过 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>

Answer 5

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

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

确保将 ID 'loadrate' 添加到您的输入中。 See it in action here.

Answer 6

您可以使用 selectedIndex 获取当前 selected 选项。然后使用 getAttribute 获取 data-tenure 属性 value.Use getElementsByClassName 到 select 隐藏的输入元素并设置它的值。

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 是预 selected。因此，如果用户不更改选项，您将永远找不到设置此隐藏元素的任何值。您可以 select 选择 Select

Answer 7

试一试：

<!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>

Answer 8

 <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());
  });
});

从数据属性获取输入值

Getting input value from a data attribute

html

javascript

input

onchange