从数据属性中获取输入值答案

【问题标题】：Getting input value from a data attribute从数据属性中获取输入值
【发布时间】：2016-07-21 05:12:55
【问题描述】：

我在下面有这个代码供用户选择 - 每个下拉选项都有不同的数据任期：

<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() 函数吗？

【问题讨论】：

你尝试过什么吗？请粘贴您尝试过的代码..
嗨 rory-h 你能告诉我选择属性“data-tenure”做什么或代表什么

标签： javascript html input onchange

【解决方案1】：

编辑、更新

我的意思是 - 获取数据任期，这将是输入值。所以如果用户选择 1，则输入值为 0.0298。如果用户选择 2 输入值为 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; 
})

【讨论】：

对不起，我的意思是 - 获取数据任期，这将是输入值。因此，如果用户选择 1，则输入值为 0.0298。如果用户选择 2，则输入值将是 0.0387..等等。
@rory-h “我的意思是 - 获取数据任期，这将是输入值。所以如果用户选择 1，输入值将是 0.0298。如果用户选择2 输入值为 0.0387" 将.value 的元素替换为document.querySelector("input.loan-rate") .value = event.target.dataset.tenure 设置为document.querySelector("input.loan-rate") .dataset.tenure = event.target.dataset.tenure。查看更新后的帖子

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你为什么不使用选择标签来接受输入

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

这是一个普通的 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.

【讨论】：

【解决方案7】：

您可以使用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之类的选项

【讨论】：

【解决方案8】：

试试看：

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

【讨论】：