Delete href on bootstrap dropdown and adding "select" to get value marked?

Question

I need a little bit help on a template, where is a pricebox dropdown elements like this

Screenshot

This is the default code of the dropdown price box.

 <!--  Various Pricing Dropdown Toggle -->
                            <div class="btn-group btn-block">
                                <button type="button" class="btn btn-block btn-secondary dropdown-toggle" data-toggle="dropdown">1 Month <b class="text-green">@ $289 </b> <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu btn-block" role="menu">
                                    <li><a href="#">3 Years @ $7500 <b class="text-green"></b></a></li>
                                    <li><a href="#">2 Years @ $5000 <b class="text-green"></b></a></li>
                                    <li><a href="#">1 Year @ $2600 <b class="text-green"></b></a></li>
                                    <li><a href="#">6 Months @ $1400 <b class="text-green"></b></a></li>
                                    <li><a href="#">3 Months @ $750 <b class="text-green"></b></a></li>
                                    <li><a href="#">1 Month @ $289 <b class="text-green"></b></a></li>
                                </ul>
                            </div>
                        <!--  End of Various Pricing Dropdown Toggle -->

But I dont need the href, so it can be deleted:

<!--  Various Pricing Dropdown Toggle -->
                                <div class="btn-group btn-block">
                                    <button type="button" class="btn btn-block btn-secondary dropdown-toggle" data-toggle="dropdown">1 Month <b class="text-green">@ $289 </b> <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu btn-block" role="menu">
                                                              <li><a>3 Years @ $5000 <b class="text-green"></b></a></li>
                                <li><a>2 Years @ $3200 <b class="text-green"></b></a></li>
                                <li><a>1 Year @ $1700 <b class="text-green"></b></a></li>
                                <li><a>6 Months @ $900 <b class="text-green"></b></a></li>
                                <li><a>3 Months @ $500 <b class="text-green"></b></a></li>
                                <li><a>1 Month @ $189 <b class="text-green"></b></a></li>
                                    </ul>
                                </div>
                            <!--  End of Various Pricing Dropdown Toggle -->

but I need one other thing:

In this example, 1 Month is the default displaying entry. I want, that of any other option is selected (2 Years in example) that this should be display if the dropdown is closing (currently it show only the default option, 1 Month)

Must JavaScript used for those thing? ( i dont need any additional function on this, only that the selection entry/option should be display anstead of default, if leaving the dropdown.

Answer 1

Try this (skip the first line if you have already referenced JQuery):

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
crossorigin="anonymous"></script>

<script type="text/javascript">
    $(function(){    
        $(".dropdown-menu li").click(function(){
            $("#button-id").text($(this).text());
            $("#button-id").val($(this).text());
        });
    });
</script>

Paste this at the top of your file, and change this line :

<button type="button" class="btn btn-block btn-secondary dropdown-toggle" data-toggle="dropdown">1 Month <b class="text-green">@ $289 </b> <span class="caret"></span> 

To this:

<button type="button" id="button-id" class="btn btn-block btn-secondary dropdown-toggle" data-toggle="dropdown">1 Month <b class="text-green">@ $289 </b> <span class="caret"></span>

For multiple instances, you can replace the script with this:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
crossorigin="anonymous"></script>

<script type="text/javascript">
    $(function(){
        var selectedListItem = $(".dropdown-menu li");
        selectedListItem.click(function(){
            var button = selectedListItem.closest("div").find(".dropdown-toggle");          
            button.text($(this).text());
            button.val($(this).text());
        });
    });
</script>