[英]Use data value of li as form input using 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>
使用javascript,如何将选择的值插入隐藏的输入字段?
<input type="hidden" id="expiry_month">
受审
<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>
但不起作用:(
var $expiryMonth = $("#expiry_month");
$(".dropdown-menu li").on('click', function () {
$expiryMonth.val($(this).data('value'));
});
您有两个具有相同ID“ expiry_month”的元素
这就是为什么未为隐藏元素分配值的原因。 将隐藏元素的ID更改为“ expiry_month_hid ”
尝试以下操作:
$(".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());
});
这是工作示例: http : //jsfiddle.net/w2fqz/2/
如果您是我,我将创建一个javascript函数change_month
并在每次单击链接之一时调用它。 这样更简单:
<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>
...
这就是功能change_month
:
function change_month(month){
$("#expiry_month").val(month);
}
您不必使用链接来执行此操作,只需将事件绑定到应可单击的div。 看看这个小提琴: http : //jsfiddle.net/YUY69/
出于演示目的,不会隐藏output
字段,因此请将其更改为
<div id='output' hidden></div>
当您想使用它时。 如果要输入表单提交的输入字段 ,脚本应通过以下方式设置值:
$("#output").val(theValue);
成:
<input type="hidden" id="output"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.