Morgari
Reputation: 555
How can I do so the default dropdown value doesn't disappear at the script
I have the Pricing Table developed with Bootstrap and Javascript. I want to rename the "Select an Option" to "Option 1" (make this Option by default). But at the moment as soon as I choose any option from the dropdown my default value "Select an option" disappears. How can I do so the default value doesn't disappear? Thanks!
$(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 -->Upvotes: 2
Views: 92
Answers (1)
chester
Reputation: 297
Add the selected class to the <li> element you wish to be selected by default:
<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 -->Upvotes: 1
Related Questions
- Default selection in bootstrap dropdown
- Bootstrap Dropdown Select Value Not Working
- bootstrap dropdown select default value not working
- jquery dropdown btn bootstrap set default value
- bootstrap dropdown - text not changing when selected
- Default Value for Dropdown in JavaScript
- bootstrap select option display value instead of text
- Trivial JavaScript / Bootstrap dropdown issue
- Setting Default Value in Bootstrap Drop Down
- Value of bootstrap dropdown do not change