删除引导下拉列表，并添加“选择”获取价值标记的href？

Question

我需要一个模板一点点的帮助，这里是pricebox下拉列表元素这样的

Screenshot

这是下拉价格框的默认密码。

 <!--  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？ （我不需要有这方面的附加功能，只有选择输入/选项应该是默认的显示anstead，如果离开下拉。

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>