javascript - 选择列表不保留所选值

Question

我创建了自定义<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			
    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>

如何显示是否选择了值？

Answer 1

我只需获取初始选择值 val() 并将其作为文本分配给 title 容器:

title.text(select.val() || 'Please Select');

如果所选的值为空(或者初始未选择任何选项)，它将使用标准的“请选择”更新标题文本。

JSFiddle

如果你想对代码有更多的控制权，你可以广泛地编写上面的代码:

if(select.val()){
    title.text(select.val());
    // anything else ...
}else{
    title.text('Please Select');
    // anything else ...
}