jquery - Bootstrap 选择菜单进入下拉菜单

Question

I have a select option in a form, but i need it to be bootstrap select button,I tried but failed with it,I think plugings are wrong or something.

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

This is my try :-

<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

正如您在这里看到的，您的 fiddle :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>

没有的话，它就不起作用。