不能使用下拉作为表单输入[关闭]

Question

我有这个 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>

这实际上是我在表单中使用的下拉菜单，而不是 <select></select>。但我无法发布在此下拉菜单中选择的值。我必须在其中使用 javascript 吗？或者是否可以直接获取数据值？

试过

               <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="expirymonth" name="expirymonth" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle">
                      <span class="dropdown-label"></span> <span class="caret"></span>
                    </button>
              <input type="hidden" id="expiry_month" name="expiry_month"/>
                    <ul class="dropdown-menu">
                      <li data-value="00" data-selected="true"><a href="#">Select Month</a></li>
                      <li data-value="01" ><a class="selectOption" href="#">01</a></li>
                      <li data-value="02" ><a class="selectOption" href="#">02</a></li>
             <li data-value="03" ><a class="selectOption" href="#">03</a></li>
                      <li data-value="04" ><a class="selectOption" href="#">04</a></li>
             <li data-value="05" ><a class="selectOption" href="#">05</a></li>
                      <li data-value="06" ><a class="selectOption" href="#">06</a></li>
             <li data-value="07" ><a class="selectOption" href="#">07</a></li>
                      <li data-value="08" ><a class="selectOption" href="#">08</a></li>
             <li data-value="09" ><a class="selectOption" href="#">09</a></li>
                      <li data-value="10" ><a class="selectOption" href="#">10</a></li>
             <li data-value="11" ><a class="selectOption" href="#">11</a></li>
                      <li data-value="12" ><a class="selectOption" href="#">12</a></li>


                    </ul>
                  </div>
</div>


 <script type="text/javascript">

    $(".selectOption").click(function () {
        var selectedOption = parseInt($(this).attr('data-value'), 10);

        $("#expiry_month").val(selectedOption.toString());
    });
    </script>

Answer 1

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

解决此问题的最佳方法是在您更改下拉菜单中的某些内容时进行隐藏选择，选择哪个值。

jQuery UI 在他们的自动完成示例中做了这样的事情：http://jqueryui.com/autocomplete/#combobox

这有一个巨大的优势，即如果浏览器不支持 javascript，则可以轻松回退。

Answer 2

您可以使用 jquery 来实现此目的。您可以在表单中使用隐藏字段，使用 jquery 获取 drop fown 的值并将值放入隐藏输入字段

Answer 3

我可以告诉你两种方法来实现这一点，现在我将告诉你第一种，使用隐藏字段

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

我使用了锚点a标签，你可以根据你的方便对li做同样的事情。