select list doesn't retain selected value

Question

I created custom <select> styles using jQuery for multiple select boxes in a form. But the <select> boxes don't show if any value pre-selected but always show "Please 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>

How can I get to show if values selected?

Answer 1

I'd simply fetch the initial select value val() and assign it as text to the title container:

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

If the selected value is empty (or no option is selected initialy), it will update title with a standard 'Please Select' text.

JSFiddle

If you want to have more controll over the code you can write the above code widely:

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

Answer 2

Add below js code in your js and check

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>