Javascript 无法将下拉列表用作表单输入

我有这个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吗？或者可以直接获取数据值吗

尝试

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

浏览器不会提交所选值，因为它不是表单元素。它根本不知道有数据要提交

最好的解决方法是，当您在下拉菜单中更改某些内容时，选择一个隐藏的select，选择它的value get

jQuery UI在其自动完成示例中做了如下操作：

---

这有一个巨大的优势，即如果浏览器不支持javascript，则很容易回退。

您可以使用jquery实现这一目的。您可以使用表单中的隐藏字段，使用jquery获取下拉框的值，并将值放入隐藏输入字段

我可以告诉您两种实现方法，现在，我将告诉您第一个问题，使用hiddenfield

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

及

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

---

我使用了点击锚定a标签，您可以根据自己的方便对li做同样的操作。

谢谢……我会尝试一下，有趣的是您接受了这个完整的非答案，而不是两个非常有用的答案。var selectedOption=parseInt（$（this）.attr（'data-value'），10）；10是什么意思？对于hanks，我将尝试此方法，如果有效，则将其标记为已接受。这不起作用。我在输入隐藏字段中获得一个值“0”。10是十进制的基数。尝试将警报放入单击函数中，然后检查变量selectedOption中是否有任何值，否则，请在进行更改后更新标记。我将帮助您使用javascript。为html元素提供selectOption类，您已经提到了该元素的属性数据值

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