如何执行此操作默认下拉列值不会在脚本

Question

我使用Bootstrap和Javascript开发了定价表。我想将“选择一个选项”重命名为“选项1”（默认情况下使用此选项）。但是，当我从下拉列表中选择任何选项时，我的默认值“选择一个选项”就会消失。我怎么能这样做，默认值不会消失？ 谢谢！

$(document).ready(function () {
    $(".btn-select").each(function (e) {
        var value = $(this).find("ul li.selected").html();
        if (value != undefined) {
            $(this).find(".btn-select-input").val(value);
            $(this).find(".btn-select-value").html(value);
        }
    });
});

$(document).on('click', '.btn-select', function (e) {
    e.preventDefault();
    var ul = $(this).find("ul");
    if ($(this).hasClass("active")) {
        if (ul.find("li").is(e.target)) {
            var target = $(e.target);
            target.addClass("selected").siblings().removeClass("selected");
            var value = target.html();
            $(this).find(".btn-select-input").val(value);
            $(this).find(".btn-select-value").html(value);
        }
        ul.hide();
        $(this).removeClass("active");
    }
    else {
        $('.btn-select').not(this).each(function () {
            $(this).removeClass("active").find("ul").hide();
        });
        ul.slideDown(300);
        $(this).addClass("active");
    }
});

$(document).on('click', function (e) {
    var target = $(e.target).closest(".btn-select");
    if (!target.length) {
        $(".btn-select").removeClass("active").find("ul").hide();
    }
    if (!$(e.target).hasClass('btn-select-value') && $(e.target).parents('.btn-select-light').length > 0) {
        var gainEmailTxt = "", maxEmailPerDayTxt = "";
        switch ($(e.target).text()) {
            case "Option 1":
                gainEmailTxt = "Change #1";
                maxEmailPerDayTxt = "Change #2";
                break;
            case "Option 2":
                gainEmailTxt = "Change #3";
                maxEmailPerDayTxt = "Change #4";
                break;
            case "Option 3":
                gainEmailTxt = "Change #5";
                maxEmailPerDayTxt = "Change #6";
                break;
            case "Option 4":
                gainEmailTxt = "Change #7";
                maxEmailPerDayTxt = "Change #8";
                break;
            default:
                gainEmailTxt = "Default Text";
                maxEmailPerDayTxt = "Default Text";
                break;
        }

        $('.table-premium td:eq(0) p').text(gainEmailTxt);
        $('.table-premium td:eq(1) p').text(maxEmailPerDayTxt);
    }
});

/* Custom */


.btn-select {
    position: relative;
    padding: 0;
    width: 100%;
    border-radius: 2px;
    margin-bottom: 13px;
}

.btn-select .btn-select-value {
    padding: 6px 12px;
    display: block;
    position: absolute;
    left: 0;
    right: 34px;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

.btn-select .btn-select-arrow {
    float: right;
    line-height: 20px;
    padding: 6px 10px;
    top: 0;
}

.btn-select ul {
    display: none;
    background-color: white;
    color: black;
    clear: both;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: none !important;
    position: absolute;
    left: -1px;
    right: -1px;
    top: 33px;
    z-index: 999;
}

.btn-select ul li {
    padding: 3px 6px;
    text-align: left;
}

.btn-select ul li:hover {
    background-color: #f4f4f4;
}

.btn-select ul li.selected {
    color: white;
}

span.mini {
    font-size: 18px;
    color: #31708f;
}
span.more {
    font-size: 14px;
    color: #337ab7;
}
.info {
    display: none;
    position: absolute;
    width: 90%;
    margin: 0 auto;
    bottom: 60px;
    left: 5%;
    background: #337ab7 !important;
    padding: 10px;
    text-align: left;
    line-height: 1.5;
    color: #fff;
    border: 3px #ddd solid;
}
.info:after {
    content: "\e252";
    font-family: 'Glyphicons Halflings';
    color: #337ab7;
    position: absolute;
    bottom: -14px;
    left: 45%;
}
.panel-footer:hover .info {
  display: inline-block;
}




/* icons */

span.glyphicon-preload {
    color: #23b070;
    padding-right: 7px;
    font-size: 13px;
}
span.glyphicon-prio {
    color: #fff;
}

span.glyphicon-more {
    font-size: 11px;
}
.table {
    margin-bottom: 0;
}
.table>tbody>tr>td {
    padding: 14px;
}
.btn-insta {
    margin-top: 13px;
    padding: 10px 0;
    font-size: 20px;
}
.table-premium p {
    font-weight: 700;
    display: inline-block;
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-12 col-md-6"><!-- table#2-starts -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Premium</h3>
        </div>
            <div class="panel-body">
                <div class="the-price">
                    <a class="btn btn-default btn-select btn-select-light">
                    <input type="hidden" class="btn-select-input" id="" name="" value="" />
                    <span class="btn-select-value">Select an Option</span>
                    <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
                    <ul>
                    <li>Option 1</li>
                    <li>Option 2</li>
                    <li>Option 3</li>
                    <li>Option 4</li>
                    </ul>
                    </a>
                <span class="mini">Monthly Subscription</small>
                <a href="#" class="btn btn-block btn-insta btn-success" role="button">Activate</a>    
                </div>
            <table class="table table-premium">
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Gain 100 Emails</p>
                </td>
            </tr>
            <tr class="active">
                <td>
                    <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Emails 0 Back</p>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>No Survey Required</p>
                </td>
            </tr>
            <tr class="active">
                <td>
                    <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Max Emails per Day: 3</p>
                </td>
            </tr>
            </table>
        </div>
            <div class="panel-footer">
                <span class="more"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More information!</span>
                    <div class="info well">
                    <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br>
                    <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 1 <br>
                    <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 2 <br>
                    <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 3 <br></span>
                    </div><!-- well -->
            </div><!-- p-f -->
        </div>
    </div><!-- t#2-ends -->

Answer 1

将selected课程添加到您希望默认选中的<li>元素：

<li class="selected">Option 1</li>

$(document).ready(function () {
    $(".btn-select").each(function (e) {
        var value = $(this).find("ul li.selected").html();
        if (value != undefined) {
            $(this).find(".btn-select-input").val(value);
            $(this).find(".btn-select-value").html(value);
        }
    });
});

$(document).on('click', '.btn-select', function (e) {
    e.preventDefault();
    var ul = $(this).find("ul");
    if ($(this).hasClass("active")) {
        if (ul.find("li").is(e.target)) {
            var target = $(e.target);
            target.addClass("selected").siblings().removeClass("selected");
            var value = target.html();
            $(this).find(".btn-select-input").val(value);
            $(this).find(".btn-select-value").html(value);
        }
        ul.hide();
        $(this).removeClass("active");
    }
    else {
        $('.btn-select').not(this).each(function () {
            $(this).removeClass("active").find("ul").hide();
        });
        ul.slideDown(300);
        $(this).addClass("active");
    }
});

$(document).on('click', function (e) {
    var target = $(e.target).closest(".btn-select");
    if (!target.length) {
        $(".btn-select").removeClass("active").find("ul").hide();
    }
    if (!$(e.target).hasClass('btn-select-value') && $(e.target).parents('.btn-select-light').length > 0) {
        var gainEmailTxt = "", maxEmailPerDayTxt = "";
        switch ($(e.target).text()) {
            case "Option 1":
                gainEmailTxt = "Change #1";
                maxEmailPerDayTxt = "Change #2";
                break;
            case "Option 2":
                gainEmailTxt = "Change #3";
                maxEmailPerDayTxt = "Change #4";
                break;
            case "Option 3":
                gainEmailTxt = "Change #5";
                maxEmailPerDayTxt = "Change #6";
                break;
            case "Option 4":
                gainEmailTxt = "Change #7";
                maxEmailPerDayTxt = "Change #8";
                break;
            default:
                gainEmailTxt = "Default Text";
                maxEmailPerDayTxt = "Default Text";
                break;
        }

        $('.table-premium td:eq(0) p').text(gainEmailTxt);
        $('.table-premium td:eq(1) p').text(maxEmailPerDayTxt);
    }
});

/* Custom */


.btn-select {
    position: relative;
    padding: 0;
    width: 100%;
    border-radius: 2px;
    margin-bottom: 13px;
}

.btn-select .btn-select-value {
    padding: 6px 12px;
    display: block;
    position: absolute;
    left: 0;
    right: 34px;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

.btn-select .btn-select-arrow {
    float: right;
    line-height: 20px;
    padding: 6px 10px;
    top: 0;
}

.btn-select ul {
    display: none;
    background-color: white;
    color: black;
    clear: both;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: none !important;
    position: absolute;
    left: -1px;
    right: -1px;
    top: 33px;
    z-index: 999;
}

.btn-select ul li {
    padding: 3px 6px;
    text-align: left;
}

.btn-select ul li:hover {
    background-color: #f4f4f4;
}

.btn-select ul li.selected {
    color: white;
}

span.mini {
    font-size: 18px;
    color: #31708f;
}
span.more {
    font-size: 14px;
    color: #337ab7;
}
.info {
    display: none;
    position: absolute;
    width: 90%;
    margin: 0 auto;
    bottom: 60px;
    left: 5%;
    background: #337ab7 !important;
    padding: 10px;
    text-align: left;
    line-height: 1.5;
    color: #fff;
    border: 3px #ddd solid;
}
.info:after {
    content: "\e252";
    font-family: 'Glyphicons Halflings';
    color: #337ab7;
    position: absolute;
    bottom: -14px;
    left: 45%;
}
.panel-footer:hover .info {
  display: inline-block;
}




/* icons */

span.glyphicon-preload {
    color: #23b070;
    padding-right: 7px;
    font-size: 13px;
}
span.glyphicon-prio {
    color: #fff;
}

span.glyphicon-more {
    font-size: 11px;
}
.table {
    margin-bottom: 0;
}
.table>tbody>tr>td {
    padding: 14px;
}
.btn-insta {
    margin-top: 13px;
    padding: 10px 0;
    font-size: 20px;
}
.table-premium p {
    font-weight: 700;
    display: inline-block;
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-12 col-md-6"><!-- table#2-starts -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Premium</h3>
        </div>
            <div class="panel-body">
                <div class="the-price">
                    <a class="btn btn-default btn-select btn-select-light">
                    <input type="hidden" class="btn-select-input" id="" name="" value="" />
                    <span class="btn-select-value">Select an Option</span>
                    <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
                    <ul>
                    <li class="selected">Option 1</li>
                    <li>Option 2</li>
                    <li>Option 3</li>
                    <li>Option 4</li>
                    </ul>
                    </a>
                <span class="mini">Monthly Subscription</small>
                <a href="#" class="btn btn-block btn-insta btn-success" role="button">Activate</a>    
                </div>
            <table class="table table-premium">
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Gain 100 Emails</p>
                </td>
            </tr>
            <tr class="active">
                <td>
                    <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Emails 0 Back</p>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>No Survey Required</p>
                </td>
            </tr>
            <tr class="active">
                <td>
                    <span class="glyphicon glyphicon-ok glyphicon-preload" aria-hidden="true"></span> <p>Max Emails per Day: 3</p>
                </td>
            </tr>
            </table>
        </div>
            <div class="panel-footer">
                <span class="more"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More information!</span>
                    <div class="info well">
                    <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br>
                    <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 1 <br>
                    <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 2 <br>
                    <span class="glyphicon glyphicon-prio glyphicon-ok glyphicon-preload" aria-hidden="true"></span> 3 <br></span>
                    </div><!-- well -->
            </div><!-- p-f -->
        </div>
    </div><!-- t#2-ends -->