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

我有一个html，它有一个以下拉方式排列的列表。如果选择的数据为真，我想将相应的数据值分配给一个隐藏的输入字段

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

尝试

$（“.selectOption”）。单击（函数（）{
var selectedOption=parseInt（$（this）.attr（'data-value'），10）；
$（“#hfSelectedMonth”）.val（selectedOption.toString（））；
});

---

但是不起作用：（

您有两个元素具有相同的id“expiration\u month”

钮扣

隐藏元素

这就是为什么隐藏元素没有赋值的原因。 将隐藏元素的id更改为“到期日\u月\u 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());
});

---

下面是工作演示：

如果我是你，我会创建一个javascript函数

change\u 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>
... 

---

您不必使用链接来执行此操作，只需将事件绑定到一个应可单击的div即可。请看一下此提琴：

出于演示目的，

输出

字段没有隐藏，因此将其更改为

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

进入：

对于您的问题，所有12个li项目都是必需的？您是否考虑过自己的时间或直接发布问题？您可能会在更新的问题中看到我的尝试，如果我没有尝试，我不会发布此内容。我会尝试让您知道，请参考更新的答案。有两个元素具有相同的ID，这就是它不起作用的原因。

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

function change_month(month){
    $("#expiry_month").val(month);
}

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

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

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