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

修改，更新

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

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

change

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

Answer 3

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

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

Answer 4

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

尝试以下代码。这里我们通过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 6

这是一个vanilla 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 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

等选项

Answer 8

试一试：

＆＃13;

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

＆＃13;

从数据属性获取输入值

8 个答案: