Question

我在表单中有一个Bootstrap下拉菜单。默认情况下，它会显示＆＃39; DROPDOWN＆＃39;但如果我从列表中选择某些内容，则不会显示所选值和/或<li>。如何让下拉菜单显示我选择的值，而不是显示＆＃39; DROPDOWN＆＃39;每次我选择一个新值。

<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="name" name="name" placeholder="First Name" value="">
    </div>
</div>

<div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">Surname</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="name" name="name" placeholder="Last Name" value="">
    </div>
</div>  

<div class="form-group">
  <label for="lastname" class="col-sm-2 control-label">Team</label>
  <div class="col-sm-10">
  <button class="btn btn-default dropdown-toggle form-control" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
  </div>
</div>

有我的HTML代码。任何帮助将不胜感激

Answer 1

首先在您的下拉菜单中添加id，如：

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="mydd">

您需要使用以下代码：

$(function () {
  $("#mydd a").click(function () {
    $("#dropdownMenu1").html($(this).html() + ' <span class="caret"></span>');
  });
});

<强>段

$(function () {
  $("#mydd a").click(function () {
    $("#dropdownMenu1").html($(this).html() + ' <span class="caret"></span>');
  });
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-5 col-sm-5 col-xs-5">
      <form class="form-horizontal" role="form" method="post" action="index.php">
        <div class="form-group">
          <label for="name" class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="First Name" value="">
          </div>
        </div>

        <div class="form-group">
          <label for="lastname" class="col-sm-2 control-label">Surname</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="Last Name" value="">
          </div>
        </div>  

        <div class="form-group">
          <label for="lastname" class="col-sm-2 control-label">Team</label>
          <div class="col-sm-10">
            <button class="btn btn-default dropdown-toggle form-control" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              Dropdown
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="mydd">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

在Bootstrap下拉表单中显示所选文本

1 个答案: