选择列表不保留所选值

Question

我使用jQuery为表单中的多个选择框创建了自定义<select>样式。但<select>框不会显示是否有任何预先选定的值但始终显示＆＃34;请选择＆＃34;。

＆＃13;

＆＃13;

  $('.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');
    });
  });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如何显示是否选择了值？

Answer 1

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

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

如果所选value为空（或初始未选择任何选项），则会使用标准'请选择'文本更新title。

JSFiddle

如果您希望对代码拥有更多控制权，可以广泛编写上述代码：

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

Answer 2

在你的js中添加以下js代码并检查

var text = $('#title').val();

   if(text != ""){

     $('.select_list li').each(function(){

            if(text == $(this).text())
              $(this).click();

     });
    }

$('.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');
    });
  });


   var text = $('#title').val();
  
   if(text != ""){
     
     $('.select_list li').each(function(){
       
            if(text == $(this).text())
              $(this).click();

     });
    }
 

.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>