Question

我有以下选择

<select>

    <option>orderby</option> 
    <option id="select1">__1</option> 
    <option id="select2">__2</option>
    <option id="select3">__3</option>

</select>

和这3个div

<div class="select1 box">You have selected <strong>green option</strong> so i am here</div>
<div class="select2 box">You have selected <strong>blue option</strong> so i am here</div>
<div class="select3 box">You have selected <strong>blue option</strong> so i am here</div>

使用此脚本

$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            if($(this).attr("id")=="select1"){
                $(".box").not(".select1").hide();
                $(".select1").show();
            }
            else if($(this).attr("id")=="select2"){
                $(".box").not(".select2").hide();
                $(".select2").show();
            }
            else if($(this).attr("id")=="select3"){
                $(".box").not(".select3").hide();
                $(".select3").show();
            }

            else{
                $(".box").hide();
            }
        });
    }).change();
});

通过选项更改选择菜单来显示/隐藏div 它运作良好。

现在，我想将此示例应用于以下引导程序下拉菜单并且需要选择默认显示的div1。

        <div class="dropdown">
            <button type="button" class="catby btn btn-sm dropdown-toggle" data-toggle="dropdown">
              <i class="ion-android-apps"></i>order by<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
        <li><a href="#" data-value="action" id="select1">__1</a></li>
        <li><a href="#" data-value="another action" id="select2">__2</a></li>
        <li><a href="#" data-value="something else here" id="select3">__3</a></li>
      </ul>
    </div>

Live example

Bootstrap下拉切换顺序依据

0 个答案: