Удалите href в выпадающем меню начальной загрузки и добавьте «select», чтобы получить значение, помеченное?

Question

Мне нужна небольшая помощь по шаблону, где есть элементы раскрывающегося списка цен, подобные этому

Снимок экрана

Это код по умолчанию для раскрывающегося списка цен..

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

Но мне не нужен href, поэтому его можно удалить:

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

, но мне нужна еще одна вещь:

В этом примере 1Месяц является отображаемой записью по умолчанию.Я хочу, чтобы была выбрана любая другая опция (например, 2 года), которая должна отображаться, если раскрывающийся список закрывается (в настоящее время отображается только опция по умолчанию, 1 месяц)

Должен использоваться JavaScript для этой вещи?(Мне не нужны никакие дополнительные функции, только то, что запись / опция выбора должна отображаться вместо значения по умолчанию, если вы выходите из выпадающего списка.

Answer 1

Попробуйте это (пропустите первую строку, если вы уже ссылались на 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>

Вставьте это в начало вашего файла и измените эту строку:

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

Для нескольких экземпляров вы можете заменить скрипт следующим:

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