Question

我在表单中有一个选择选项，但我需要它作为bootstrap 选择按钮，我尝试但失败了，我认为插件是错误的或东西。

           <select name="city">
                <option value="Sydney">Sydney</option>
                <option value="Brisbane">Brisbaneo</option>
                <option value="Melbourne">Melbourne</option>
                <option value="Canberra">Canberra</option>
                <option value="Darwin">Darwin</option>
                <option value="Perth">Perth</option>
           </select>
            <li><input name="submit" type="submit" /></li>
        </ul>

    </form>

这是我的尝试： -

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     Select City
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Sydney</a></li>
      <li><a href="#">Brisbane</a></li>
      <li><a href="#">Melbourne</a></li>
      <li><a href="#">Canberra</a></li>
      <li><a href="#">Darwin</a></li>
      <li><a href="#">Perth</a></li>

    </ul>

<script>
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
</script>

php for this list

if(isset($_POST['submit'])) {
 switch($_POST['city']) {
  case 'gampaha': $to = 'to1@gmail.com'; break;
  case 'colombo': $to = 'to2@hotmail.com'; break;
 }
}

Answer 1

如你所见，你的小提琴：http://bootply.com/104533

您需要将代码包装在div class="dropdown"

中

<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     Select City
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Sydney</a></li>
      <li><a href="#">Brisbane</a></li>
      <li><a href="#">Melbourne</a></li>
      <li><a href="#">Canberra</a></li>
      <li><a href="#">Darwin</a></li>
      <li><a href="#">Perth</a></li>

    </ul>
</div>

没有，它不起作用。

Answer 2

您可以将下拉列表放在包含类btn-group的包装器中。例如：

<div class="btn-group">
  <button class="btn dropdown-toggle clearfix">City <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

bootstrap选择菜单到下拉列表

2 个答案: