我在我的HTML代码中有几个表单字段和一个 Bootstrap 下拉菜单。 我希望用户选择的数字反映在按钮文本上。 我编写了以下代码，但似乎没有起作用。
这是下拉列表的HTML代码：
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" value="Number of partners :" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Number of partners :
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li id="no" value="2"><a href="#">2</a></li>
<li id="no" value="3"><a href="#">3</a></li>
<li id="no" value="4"><a href="#">4</a></li>
<li id="no" value="5"><a href="#">5</a></li>
<li id="no" value="6"><a href="#">6</a></li>
<li id="no" value="7"><a href="#">7</a></li>
<li id="no" value="8"><a href="#">8</a></li>
</ul>
</div>
JavaScript:
$(".dropdown-toggle").dropdown();
$('.dropdown-toggle').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
编辑1： 我将我的完整代码发布供参考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Form</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./datepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<center><form>
<div class="input-append date" data-date = "" format="dd/mm/yyyy" >
<label for="dp1">Starting Date</label> <br>
<input id="dp1" size="16" type="text" value=" dd-mm-yyyy" name="dp1"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal1"></i></span>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" value="Number :" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Number :
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li id="no" value="2"><a href="#">2</a></li>
<li id="no" value="3"><a href="#">3</a></li>
<li id="no" value="4"><a href="#">4</a></li>
<li id="no" value="5"><a href="#">5</a></li>
<li id="no" value="6"><a href="#">6</a></li>
<li id="no" value="7"><a href="#">7</a></li>
<li id="no" value="8"><a href="#">8</a></li>
</ul>
</div>
<div class="form-group">
<label for="inputName">Name of the partner</label>
<input type="text" class="form-control" id="inputName" placeholder="" name="inputName">
<span id="inputNameSpan"></span>
</div>
<div class="form-group">
<label for="inputFname">Father's Name</label>
<input type="text" class="form-control" id="inputFname" placeholder="" name="inputFname">
<span id="inputFnameSpan"></span>
</div>
<div class="input-append date" data-date="" format="dd/mm/yyyy">
<label for="dp2">Date of Birth</label> <br>
<input id="dp2" size="16" type="text" value=" dd-mm-yyyy" name="dp2"/>
<span class="add-on"><span class="glyphicon glyphicon-calender" id="cal2"></span></span>
</div>
<div class="form-group">
<label for="inputAddress">Address of the partner</label>
<textarea type ="text" class = "form-control" id = "inputAddress" rows = "8" placeholder = "" name="inputAddress"></textarea>
<span id="inputAddressSpan"></span>
</div>
<div class="form-group">
<label for="inputObjects">Objects of the organization</label>
<textarea type ="text" class = "form-control" id = "inputObjects" rows = "8" placeholder = "" name="inputObjects" ></textarea>
<span id="inputObjectsSpan"></span>
</div>
<div class="form-group">
<label for="inputFirmName">Name of the Partnership Firm</label>
<input type="text" class="form-control" id="inputFirmName" placeholder="" name="inputFirmName">
<span id="inputFirmNameSpan"></span>
</div>
<div class="input-append date" data-date="" format="dd/mm/yyyy">
<label for="dp3">Date of Commencement of the Partnership Firm</label> <br>
<input id="dp3" size="16" type="text" value=" dd-mm-yyyy" name="dp3"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal3"></i></span>
</div>
<div class="form-group">
<label for="inputOffice">Registered Office of the Partnership Firm</label>
<textarea type ="text" class = "form-control" id = "inputOffice" rows = "8" placeholder = "" name ="inputOffice" ></textarea>
<span id="inputOfficeSpan"></span>
</div>
<div class="form-group">
<label for="inputWill">At will?</label>
<input type="text" class="form-control" id="inputWill" placeholder="" name= "inputWill">
<span id="inputWillSpan"></span>
</div>
<div class="form-group">
<label for="inputContribution">Capital Contribution of each Partner</label>
<input type="text" class="form-control" id="inputContribution" placeholder="" name ="inputContribution" >
<span id="inputContributionSpan"></span>
</div>
<div class="form-group">
<label for="inputSalary">Salary for each Partner</label>
<input type="text" class="form-control" id="inputSalary" placeholder="" name= "inputSalary">
<span id="inputSalarySpan"></span>
</div>
<div class="form-group">
<label for="inputProfit">Profit share for each partner</label>
<input type="text" class="form-control" id="inputProfit" placeholder="" name="inputProfit">
<span id="inputProfitSpan"></span>
</div>
<div class = "form-group">
<center><button type="submit">SEND</button></center>
</div>
</form></center>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(document).ready (function (){
$("#dp1").datepicker();
$("#dp2").datepicker();
$('#dp3').datepicker();
$("#dp1").datepicker("dd-mm-yyyy", new Date());
$("#dp2").datepicker("dd-mm-yyyy", new Date());
$("#dp3").datepicker("dd-mm-yyyy", new Date());
$(".dropdown-toggle").dropdown();
$('.dropdown-toggle').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
<script src="./bootstrap-datepicker.js"></script> </body>
</html>
$(this).parent().siblings('.dropdown-toggle').html(htmlText);- Jack Guy