Question

我无法找到一种方法来使用validator.js引导程序库documentation来获取Bootstrap下拉列表。它适用于所有其他领域，但它不适用于下拉列表。可能有办法，但我不知道如何做。这是我的下拉代码。

<div class="dropdown" >
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Select a number   
  <span class="caret"></span></button>
  <ul class="dropdown-menu" >
    <li><a id="a_5" href="#">5</a></li>
    <li><a id="a_4" href="#">4</a></li>
    <li><a id="a_3" href="#">3</a></li>
    <li><a id="a_2" href="#">2</a></li>
    <li><a id="a_1" href="#">1</a></li>
  </ul>
</div>

Answer 1

它似乎没有在文档中显示示例，如果您使用的是Html5，您可以将其更改为使用带有必需属性的select标记（如果这是一个选项），此处就在这里。

<form >
    <select required>
      <option value="">None</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
    </form>

Answer 2

假设显示的代码位于<form>内，其中安装了Bootstrap验证器。

<div class="dropdown" >
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Select a number   
  <span class="caret"></span></button>
  <ul class="dropdown-menu" >
    <li><a id="a_5" href="#">5</a></li>
    <li><a id="a_4" href="#">4</a></li>
    <li><a id="a_3" href="#">3</a></li>
    <li><a id="a_2" href="#">2</a></li>
    <li><a id="a_1" href="#">1</a></li>
  </ul>
  <input type="hidden" id="dropdownSelected" class="form-control"></input>
</div>

<script>
$('.dropdown li').on('click', function(){
    $('#dropdownSelected').val($(this).text());
});
</script>

现在应该验证的是隐藏的输入 ;）

使用validator.js进行Bootstrap下拉列表

2 个答案: