2016-08-05 201 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>