2016-08-05 104 views
0

我知道这个问题的变种已经在这个网站上多次提出过,但我会再试一次。我觉得我已经尝试过所有可能的代码组合,试图让它起作用,但没有运气。我想要做的就是获取按钮/下拉菜单上的“高级:”文本,以在单击时更改为所选下拉项目选项之一(Item1,Item2等)。将按钮/下拉菜单更改为选定的下拉菜单

所有功能显然不会在我的代码中结束,但我只是想给我已经尝试过的例子。

$(function() { 
      $("#dropdown").click(function() { 
       $("#AdvancedSearch").text($(this).find(":selected").text()); 
       $("#dropdown option:selected").text(); 
       var text = $("#AdvancedSearch").text($(this).text()); 
       alert(text); 
      }); 
     }); 

     $(".dropdown-menu li a").click(function() { 
      var selText = $(this).text(); 
      $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText); 
     }); 

     $(function() { 

      $("#dropdown").on('click', 'li a', function() { 
       $("#AdvancedSubmit").text($(this).text()); 
       $("#AdvancedSubmit").val($(this).text()); 
      }); 

     }); 

     $(function() { 

      $("#dropdown").click(function() { 

       $("#AdvancedSubmit").text($(this).text()); 
       $("#AdvancedSubmit").val($(this).text()); 

      }); 

     }); 


<div class="container"> 
     <div class="row buffer"> 
      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 "> 
        <div class="input-group" role="group" > 
         <div class="input-group-btn" role="group"> 
         <button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button> 
        <div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;"> 
         <li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li> 
         <li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li> 
         <li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li> 
        </div> 
        </div> 
        </div> 
      </div> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center"> 
        <div class="input-group" role="group"> 
         <input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" /> 
        </div> 
      </div> 
     </div> 
     </div> 

回答

1

你想要的是当用户点击列表链接时执行一个函数。 这个函数必须把文本放在它自己的标签中,我们必须把这个文本放在每个有“选择”类的元素中。

$(function() { 
 
     $(".dropdown-menu li a").click(function() { 
 
      var selText = $(this).text(); 
 
      $(".selection").html(selText); 
 
     }); 
 

 
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <div class="row buffer"> 
 
      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 "> 
 
        <div class="input-group" role="group" > 
 
         <div class="input-group-btn" role="group"> 
 
         <button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button> 
 
        <div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;"> 
 
         <li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li> 
 
         <li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li> 
 
         <li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li> 
 
        </div> 
 
        </div> 
 
        </div> 
 
      </div> 
 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center"> 
 
        <div class="input-group" role="group"> 
 
         <input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" /> 
 
        </div> 
 
      </div> 
 
     </div> 
 
     </div>

良好的毅力在你尝试!

+0

而且,这是我没有尝试的组合...完美的作品。完全忘了我在那里添加了span class =“selection”。感谢您的帮助和快速响应! – ryan45366

+0

这可能适用于另一个问题,但由于它是相关的,我想知道如果你知道如何在重新绑定后不让这些文本发生变化?在该按钮的文本更改为下拉选择后,我使用该文本为sqlbuilder.where子句创建筛选器。当我通过页面刷新并清除更改时选择搜索按钮?有关如何在用户决定更改之前保持更改的任何想法? – ryan45366

+0

你说得对,这是一个太长的问题:) – technico

0

试试这个:

$(function() { 
 
    $("#dropdown a").click(function() { 
 
     $("#AdvancedSearch .selection").text('Advanced:'+$(this).text()); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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="container"> 
 
     <div class="row buffer"> 
 
      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 "> 
 
        <div class="input-group" role="group" > 
 
         <div class="input-group-btn" role="group"> 
 
         <button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button> 
 
        <div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;"> 
 
         <li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li> 
 
         <li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li> 
 
         <li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li> 
 
        </div> 
 
        </div> 
 
        </div> 
 
      </div> 
 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center"> 
 
        <div class="input-group" role="group"> 
 
         <input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" /> 
 
        </div> 
 
      </div> 
 
     </div> 
 
     </div>