Question

我有一个html，其中有一些列表以下拉样式排列。如果数据选择为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>

但不起作用:(

Answer 1

var $expiryMonth = $("#expiry_month");    

$(".dropdown-menu li").on('click', function () {
        $expiryMonth.val($(this).data('value'));
});

Answer 2

您有两个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/

Answer 3

如果我是你，我会创建一个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);
}

Answer 4

您不必使用链接来执行此操作，只需将事件绑定到应该可点击的div。看看这个小提琴：http://jsfiddle.net/YUY69/

出于演示目的，未隐藏output字段，因此请将其更改为

<div id='output' hidden></div>

当您想要使用它时。 如果您希望输入字段用于表单提交，则脚本应按以下方式设置值：

$("#output").val(theValue);

成：

<input type="hidden" id="output"/>

使用隐藏输入字段将li的数据值用作表单输入

4 个答案: