javascript - Change ButtonDropdown Text to Selected Dropdown Item - Stack Overflow

admin管理员组

文章数量:1432627

I know variations of this questions have been asked multiple times on this site, but I'm going to give it another try. I feel like I have tried every bination of code possible trying to get this to work, but have had no luck. All I want to do is to get the 'Advanced:' text on the button/dropdown toggle to change to one of the selected dropdown item options when clicked (Item1, Item2, etc).

All functions are obviously not going to end up in my code, but I just wanted to give examples of what I have already tried.

$(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>

I know variations of this questions have been asked multiple times on this site, but I'm going to give it another try. I feel like I have tried every bination of code possible trying to get this to work, but have had no luck. All I want to do is to get the 'Advanced:' text on the button/dropdown toggle to change to one of the selected dropdown item options when clicked (Item1, Item2, etc).

All functions are obviously not going to end up in my code, but I just wanted to give examples of what I have already tried.

$(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>

• javascript
• jquery

Share Improve this question Follow asked Aug 5, 2016 at 3:32 ryan45366ryan45366 2922 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Try this :

$(function () {
    $("#dropdown a").click(function () {
        $("#AdvancedSearch .selection").text('Advanced:'+$(this).text());
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./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>

What you want is to execute a function when user click the list link. This function must take the text inside it's own tag, and we must put that text inside every element having "selection" class.

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

         

<script src="https://ajax.googleapis./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>

Good perseverance on your attempts !

本文标签： javascriptChange ButtonDropdown Text to Selected Dropdown ItemStack Overflow