Question

我具有HTML格式的以下内容：

<div class="input-group">
  <span class="input-group-addon">     
    <input type="checkbox" checked="checked" id="userNamesCheckbox" 
     name="userNamesCheckbox">     
   </span>
   <input id="userNames" name="userNames" class="form-control" 
    type="text" placeholder="Ein oder mehrere Nicknames">
    <span class="input-group-btn">
      <!-- Single button -->
      <div class="btn-group">
        <button id="userNamesActionButton" type="button" class="btn 
         btn-default dropdown-toggle" data-toggle="dropdown" aria- 
         haspopup="true" aria-expanded="false">
         Action <span class="caret"></span>
      </button>
      <ul id="userNamesActionButtonMenu" class="dropdown-menu">
        <li><a href="#">Filtern</a></li>
        <li><a href="#">Anzeigen</a></li>
      </ul>
    </div>
  </span>
</div>

如何将按钮的名称设置为从下拉菜单中选择的值？我想我需要在按钮（“ userNamesActionButton”）上注册一个事件处理程序并调用一个函数，但是该函数的外观如何？到目前为止，我一直没有成功，但是我不能承认自己不是Jquery的专家，所以请在这里寻求帮助

谢谢！

Answer 1

您可以执行以下操作：

您应该考虑阅读jQuery，因为对于新手来说也太容易了。

我注意到您正在使用引导程序，如果您希望caret而不修改dom，请执行以下操作。

$('#userNamesActionButtonMenu').on('click', 'li', function(){
    $('#userNamesActionButton').html($(this).text()+' <span class="caret"></span>');
});

.input-group{
margin: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="input-group">
  <span class="input-group-addon">     
    <input type="checkbox" checked="checked" id="userNamesCheckbox" 
     name="userNamesCheckbox">     
   </span>
   <input id="userNames" name="userNames" class="form-control" 
    type="text" placeholder="Ein oder mehrere Nicknames">
    <span class="input-group-btn">
      <!-- Single button -->
      <div class="btn-group">
        <button id="userNamesActionButton" type="button" class="btn 
         btn-default dropdown-toggle" data-toggle="dropdown" aria- 
         haspopup="true" aria-expanded="false">
         Action <span class="caret"></span>
      </button>
      <ul id="userNamesActionButtonMenu" class="dropdown-menu">
        <li><a href="#">Filtern</a></li>
        <li><a href="#">Anzeigen</a></li>
      </ul>
    </div>
  </span>
</div>

如果您可以修改dom，请更改以下内容：

DOM来自

<button id="userNamesActionButton" type="button" class="btn 
         btn-default dropdown-toggle" data-toggle="dropdown" aria- 
         haspopup="true" aria-expanded="false">
         Action <span class="caret"></span>
</button>

收件人：

<button id="userNamesActionButton" type="button" class="btn 
         btn-default dropdown-toggle" data-toggle="dropdown" aria- 
         haspopup="true" aria-expanded="false">
         <span class="action-btn-text"></span> <span class="caret"></span>
</button>

并将js更改为：

$('#userNamesActionButtonMenu').on('click', 'li', function(){
   $('.action-btn-text').text($(this).text());
});

Answer 2

如何将按钮的名称设置为从下拉菜单中选择的值？

 <div class="input-group">
      <span class="input-group-addon">     
        <input type="checkbox" checked="checked" id="userNamesCheckbox" 
         name="userNamesCheckbox">     
       </span>
       <input id="userNames" name="userNames" class="form-control" 
        type="text" placeholder="Ein oder mehrere Nicknames">
        <span class="input-group-btn">
          <!-- Single button -->
          <div class="btn-group">
            <button id="userNamesActionButton" type="button" class="btn 
             btn-default dropdown-toggle" data-toggle="dropdown" aria- 
             haspopup="true" aria-expanded="false">
             Action <span class="caret"></span>
          </button>
          <ul id="userNamesActionButtonMenu" class="dropdown-menu">
            <li><a href="#" onclick="changeButtonText(this.innerText)">Filtern</a></li>
            <li><a href="#" onclick="changeButtonText(this.innerText)">Anzeigen</a></li>
          </ul>
        </div>
        <script>
        function changeButtonText(value){
            document.getElementById('userNamesActionButton').innerText = value;
        }
        </script>
      </span>
    </div>

如何根据所选选项设置下拉按钮文本？

2 个答案: