[英]Use data value of li as form input using hidden input field
I have an html which has a some list which is arranged in drop down style.If the data-selected is true,I want to assign that corresponding data value to an hidden input field 我有一个带有一些列表的html列表,该列表以下拉样式排列。如果data-selected为true,我想将相应的数据值分配给隐藏的输入字段
<div id="mySelect" class="select btn-group m-b" data-resize="auto">
<button style="font-weight:700;background-color:#fff;border-style:solid;
border-width:2px" type="button" id="expiry_month" name="expiry_month" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle"> <span class="dropdown-label"></span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li data-value="00" data-selected="true"><a href="#">Select Month</a>
</li>
<li data-value="01"><a href="#">01</a>
</li>
<li data-value="02"><a href="#">02</a>
</li>
<li data-value="03"><a href="#">03</a>
</li>
<li data-value="04"><a href="#">04</a>
</li>
<li data-value="05"><a href="#">05</a>
</li>
<li data-value="06"><a href="#">06</a>
</li>
<li data-value="07"><a href="#">07</a>
</li>
<li data-value="08"><a href="#">08</a>
</li>
<li data-value="09"><a href="#">09</a>
</li>
<li data-value="10"><a href="#">10</a>
</li>
<li data-value="11"><a href="#">11</a>
</li>
<li data-value="12"><a href="#">12</a>
</li>
</ul>
</div>
Using a javascript how can I insert the value selected to an hidden input field? 使用javascript,如何将选择的值插入隐藏的输入字段?
<input type="hidden" id="expiry_month">
TRIED 受审
<input type="hidden" id="hfSelectedMonth" value="0" />
<ul class="dropdown-menu">
<li data-value="00" data-selected="true"><a class="selectOption" href="#" data-value="0">Select Month</a>
</li>
<li data-value="01"><a class="selectOption" href="#" data-value="1">01</a>
</li>
<li data-value="02"><a class="selectOption" href="#" data-value="2">02</a>
</li>
</ul>
<script type="text/javascript">
$(".selectOption").click(function () {
var selectedOption = parseInt($(this).attr('data-value'), 10);
$("#hfSelectedMonth").val(selectedOption.toString());
});
</script>
But doesnt work :( 但不起作用:(
var $expiryMonth = $("#expiry_month");
$(".dropdown-menu li").on('click', function () {
$expiryMonth.val($(this).data('value'));
});
You had two elements with same id "expiry_month" 您有两个具有相同ID“ expiry_month”的元素
Thats' why hidden element is not assigned the value. 这就是为什么未为隐藏元素分配值的原因。 Change the id for hidden element to " expiry_month_hid "
将隐藏元素的ID更改为“ expiry_month_hid ”
Try following : 尝试以下操作:
$(".dropdown-menu li").click(function () {
var selectedOption = parseInt($(this).attr('data-value'), 10);
$("#expiry_month_hid").val(selectedOption.toString());
console.log( $("#expiry_month_hid").val());
});
Here is the working demo : http://jsfiddle.net/w2fqz/2/ 这是工作示例: http : //jsfiddle.net/w2fqz/2/
If I were you, I'd create a javascript function change_month
and call it everytime one of the links is clicked. 如果您是我,我将创建一个javascript函数
change_month
并在每次单击链接之一时调用它。 It's simpler this way: 这样更简单:
<li><a href="javascript:change_month('01')">01</a>
<li><a href="javascript:change_month('02')">02</a>
<li><a href="javascript:change_month('03')">03</a>
<li><a href="javascript:change_month('04')">04</a>
...
And this would be the function change_month
: 这就是功能
change_month
:
function change_month(month){
$("#expiry_month").val(month);
}
You don't have to use links to do this, just bind the event to a div that should be clickable. 您不必使用链接来执行此操作,只需将事件绑定到应可单击的div。 Take a look at this fiddle: http://jsfiddle.net/YUY69/
看看这个小提琴: http : //jsfiddle.net/YUY69/
The output
field isn't hidden for demonstration purposes, so change it to 出于演示目的,不会隐藏
output
字段,因此请将其更改为
<div id='output' hidden></div>
When you want to use it. 当您想使用它时。 If you want an input field for form submission the script should set the value by:
如果要输入表单提交的输入字段 ,脚本应通过以下方式设置值:
$("#output").val(theValue);
into: 成:
<input type="hidden" id="output"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.