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 执行相同操作。

不能使用下拉作为表单输入

3 个答案: