ryan45366 ryan45366 - 4 months ago 8
Javascript Question

Change Button/Dropdown Text to Selected Dropdown Item

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 combination 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>

Answer

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.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>

Good perseverance on your attempts !