个人中心
gpt4 book ai didi

javascript - bootstrap 下拉列表 - 文本在选择时不会改变

转载 作者：太空狗 更新时间：2023-10-29 12:33:09 24 4
gpt4 key购买 nike

我的 HTML 代码中有几个表单字段以及一个 Bootstrap 下拉菜单。我希望用户选择的数字反射(reflect)在按钮的文本上。我写了下面的代码，但它似乎不起作用。

这是下拉菜单的 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>

最佳答案

您需要更改选择以添加点击事件监听器。你的按钮 .dropdown-toggle不包含您的下拉列表或 anchor 标记；你的<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

改变:

$('.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);
});

到:

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

关于javascript - bootstrap 下拉列表 - 文本在选择时不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31968490/

24 4 0
文章推荐： c - 如何通过 DirectFB 使用鼠标
文章推荐： html - 文本不是从输入文本字段的左上角开始的
文章推荐： javascript - 如何使用 javascript 或 jQuery 处理多个 HTML 中的公共(public)代码
文章推荐： css - 如何在第二行中选择 HTML 表格的第 2 列到第 5 列？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com