我創建了自定義<select>
樣式,使用jQuery在表單中的多個選擇框。但<select>
框不顯示是否有預先選定的值,但始終顯示「請選擇」。選擇列表不保留選定值
$('.custom_select').each(function() {
var list = $(this).children('ul'),
select = $(this).find('select'),
title = $(this).find('.select_title');
title.css('min-width', title.outerWidth());
// select items to list items
if ($(this).find('[data-filter]').length) {
for (var i = 0, len = select.children('option').length; i < len; i++) {
list.append('<li data-filter="' + select.children('option').eq(i).data('filter') + '" class="tr_delay_hover">' + select.children('option').eq(i).text() + '</li>')
}
} else {
for (var i = 0, len = select.children('option').length; i < len; i++) {
list.append('<li class="tr_delay_hover">' + select.children('option').eq(i).text() + '</li>')
}
}
select.hide();
// open list \t \t \t
title.on('click', function() {
list.slideToggle(400);
$(this).toggleClass('active');
});
// selected option
list.on('click', 'li', function() {
var val = $(this).text();
title.text(val);
list.slideUp(400);
select.val(val);
title.toggleClass('active');
});
});
.select_title {
cursor: pointer;
padding: 2px 39px 3px 9px;
border: 2px solid #e4e4e2;
background: #f5f7f8;
z-index: 1;
min-width: 75px;
-webkit-transition: border-color .4s ease;
-moz-transition: border-color .4s ease;
-o-transition: border-color .4s ease;
transition: border-color .4s ease;
}
.select_list {
cursor: pointer;
width: 100%;
border-left: 2px solid #e4e4e2;
border-right: 2px solid #e4e4e2;
border-bottom: 2px solid #e4e4e2;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="custom_select relative">
<div class="select_title">Please Select</div>
<ul class="select_list d_none" style="display:none;"></ul>
<select name="title" id="title" required style="display:none;">
<option value=""></option>
<option value="Mr." selected="selected">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss.">Miss</option>
</select>
</div>
我怎樣才能得到,如果選擇的值顯示?
?除了填充自定義選擇框之外,您不需要做任何事情。 – putvande
那麼真正的問題是什麼?你想要發生什麼?我創建了一個[小提琴](http://jsfiddle.net/dduh973k/),一切似乎工作... – JiFus
是的一切工作,但只有'<選項值=「先生。」選擇=「選擇」>先生。'不顯示,它的選擇,所以試圖找出如何顯示'先生'而不是'請選擇' – Shehary