[英]Getting input value from a data attribute
I have this code below where user can choose - each dropdown option has different data-tenure: 我在下面的代码中可供用户选择-每个下拉选项具有不同的数据使用期限:
<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>
What I want is to set the input value to the data-tenure above - : 我想要的是将输入值设置为上面的数据使用期限-:
<input type="hidden" class="loan-rate" value="??" />
Do I need to add onchange() function to the dropdown above? 我需要在上面的下拉菜单中添加onchange()函数吗?
Edit, Updated 编辑,更新
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.
因此,如果用户选择1,则输入值为0.0298。 If the user selects 2 the input value will be 0.0387
如果用户选择2,则输入值为0.0387
You can use change
event at .dropdown2
element, document.querySelector()
with selector "input.loan-rate"
, set .value
property with event.target
Element.dataset
at change
event handler 您可以在带有选择器
"input.loan-rate"
.dropdown2
元素document.querySelector()
处使用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;
})
<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());
});
});
why don't you use select tag to take input 你为什么不使用选择标签来输入
<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;
}
Try the below code. 试试下面的代码。 Here we are passing the object via an onchange event.
在这里,我们通过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>
This is a vanilla js solution. 这是一个普通的js解决方案。 There will probably be tons of jquery responses.
可能会有大量的jquery响应。 You do need the onchange event:
您确实需要onchange事件:
<select class="dropdown2 loan-tenure" onchange="document.getElementById('loanrate').value = this.options[this.selectedIndex].dataset.tenure">
Make sure you add the id 'loadrate' to your input. 确保将id'loadrate'添加到输入中。 See it in action here .
看到它在这里行动 。
You can use selectedIndex
to get the the current selected option. 您可以使用
selectedIndex
来获取当前选定的选项。 Then use getAttribute
to get the data-tenure
attribute value.Use getElementsByClassName
to select the hidden input element and set it's value. 然后使用
getAttribute
获取data-tenure
属性值。 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;
}
Note: Initially the value of hidden field will always be empty,since 1
is pre selected. 注意:由于预先选择
1
,最初,隐藏字段的值始终为空。 So if an user don't change the option you will never find any value set this hidden element. 因此,如果用户不更改该选项,则将永远找不到设置此隐藏元素的任何值。 You can select an option like
Select
您可以选择喜欢的选项
Select
Try it : 试试吧 :
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.