将文本分配给Bootstrap中的下拉按钮

Assigning text to dropdown buttons in Bootstrap

本文关键字：按钮 Bootstrap 文本 分配      更新时间：2023-09-26

在执行POST请求时，我在为下拉按钮分配值以及获取它们的值时遇到了问题。

  <body>
    <h1>Hello, world!</h1>
    <div class="btn-group">
    <a class="btn btn-ledger dropdown-toggle" data-toggle="dropdown" href="#">
    Ledger
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">With Margin</a></li>
    <li><a tabindex="-1" href="#">Without Margin</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <a class="btn btn-company-code dropdown-toggle" id = "company_code" data-toggle="dropdown" href="#">
    Company Code
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">EA</a></li>
    <li><a tabindex="-1" href="#">EAC</a></li>
    <li><a tabindex="-1" href="#">ROC</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <a class="btn btn-cost-centre dropdown-toggle" data-toggle="dropdown" href="#">
    Cost centre
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">ALL</a></li>
    <li><a tabindex="-1" href="#">NSE-EQ</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <a class="btn btn-type dropdown-toggle" data-toggle="dropdown" href="#">
    Type
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">CLNT</a></li>
    <li><a tabindex="-1" href="#">GENL</a></li>
    <li><a tabindex="-1" href="#">MARG</a></li>
    </ul>
    </div>
    <button type="submit" id = "submit" class="btn btn-success">
                <i class="icon-circle-arrow-right icon-large"></i> Submit
    </button>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../static/js/bootstrap.min.js"></script>
    <script>
    $(".dropdown-menu").click(function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });
    $('#submit').on('click', function(event) {
        url = '/ledger/data'
        alert($("company_code").attr('value'));
 // event.preventDefault(); // To prevent following the link (optional)
      $.post(url,function(response){
        alert(response);
      });
});
    </script>
  </body>

我想要的是在选择下拉值时更改按钮的文本。目前，当我选择一个值时，所有按钮的文本都会更改。我该如何阻止它？

当我点击提交按钮时，我想要所有按钮的当前值。目前它返回undefined。我哪里错了？

尝试

$(".dropdown-menu li").click(function(){
    $(this).closest('.btn-group').children('a').text($(this).text())
});

演示：Fiddle

相关文章：