custom select show selected value after page refresh

Question

I am trying to build my custom select but I am stucked. Everything works fine until page refresh. I am a jQuery begginer and I found this on codepen.

 $('select').each(function(){ var $this = $(this), numberOfOptions = $(this).children('option').length; $this.addClass('select-hidden'); $this.wrap('<div class="select"></div>'); $this.after('<div class="select-styled"></div>'); var $styledSelect = $this.next('div.select-styled'); $styledSelect.text($this.children('option').eq(0).text()); var $list = $('<ul />', { 'class': 'select-options' }).insertAfter($styledSelect); for (var i = 0; i < numberOfOptions; i++) { $('<li />', { text: $this.children('option').eq(i).text(), rel: $this.children('option').eq(i).val() }).appendTo($list); } var $listItems = $list.children('li'); $styledSelect.click(function(e) { e.stopPropagation(); $('div.select-styled.active').not(this).each(function(){ $(this).removeClass('active').next('ul.select-options').hide(); }); $(this).toggleClass('active').next('ul.select-options').toggle(); }); $listItems.click(function(e) { e.stopPropagation(); $styledSelect.text($(this).text()).removeClass('active'); $this.val($(this).attr('rel')); $list.hide(); //console.log($this.val()); }); $(document).click(function() { $styledSelect.removeClass('active'); $list.hide(); }); });

 .select-hidden { display: none; visibility: hidden; padding-right: 10px; }.select { cursor: pointer; display: inline-block; position: relative; font-size: 12px; color: #005ca5; height: 40px; width: 155px; }.select-styled { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #a2a2a2; padding: 10px 15px; border-radius: 20px; }.select-styled:after { content: ""; width: 0; height: 0; border: 7px solid transparent; border-color: #005ca5 transparent transparent transparent; position: absolute; top: 16px; right: 10px; }.select-styled.active { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }.select-styled.active:after { top: 9px; border-color: transparent transparent #005ca5 transparent; }.select-options { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 999; margin: 0; padding: 0; list-style: none; background-color: #fff; overflow-y: scroll; max-height: 200px; border: 1px solid #a2a2a2; border-top: 0px; }.select-options li { margin: 0; padding: 12px 0; text-indent: 15px; transition: 0.3s; }.select-options li:hover { color: #fff; background: #005ca5; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="color" id="frm-statusForm-form-color" class="select-hidden"> <option value="#E19244">Orange</option> <option value="#666666">Grey</option> <option value="#886666" selected="">Brown</option> <option value="#2FB483">Green</option> <option value="#005CA5">Blue</option> <option value="#71DFFC">Light blue</option></select>

I am working with php, when I select a value, it saves the selected value. In source code u can see in default select selected value, but not in my custom select. Select is automatically generated so I can't change HTML. So the only way is to change jQuery...

Answer 1

You can use localeStorage API for such implementation, localeStorage have .setItem() and .getItem() methods where you can set values to be used across your app even after a refresh,

changes:

var styledText = $this.children('option').eq(0).text();
if(localStorage.getItem($this.attr('name'))) {
  styledText = localStorage.getItem($this.attr('name'));
}
$styledSelect.text(styledText);

and in $listItems.click :

$listItems.click(function(e) {
  e.stopPropagation();
  $styledSelect.text($(this).text()).removeClass('active');
  $this.val($(this).attr('rel'));
  $list.hide();
  localStorage.setItem($this.attr('name'), $(this).text());
});

here is a working jsfildde , also a snippet, but it will not work here since stackoverflow snippets are sandboxed and can't access localStorage:

 $('select').each(function(){ var $this = $(this), numberOfOptions = $(this).children('option').length; $this.addClass('select-hidden'); $this.wrap('<div class="select"></div>'); $this.after('<div class="select-styled"></div>'); var $styledSelect = $this.next('div.select-styled'); var styledText = $this.children('option').eq(0).text(); if(localStorage.getItem($this.attr('name'))) { styledText = localStorage.getItem($this.attr('name')); } $styledSelect.text(styledText); var $list = $('<ul />', { 'class': 'select-options' }).insertAfter($styledSelect); for (var i = 0; i < numberOfOptions; i++) { $('<li />', { text: $this.children('option').eq(i).text(), rel: $this.children('option').eq(i).val() }).appendTo($list); } var $listItems = $list.children('li'); $styledSelect.click(function(e) { e.stopPropagation(); $('div.select-styled.active').not(this).each(function(){ $(this).removeClass('active').next('ul.select-options').hide(); }); $(this).toggleClass('active').next('ul.select-options').toggle(); }); $listItems.click(function(e) { e.stopPropagation(); $styledSelect.text($(this).text()).removeClass('active'); $this.val($(this).attr('rel')); $list.hide(); localStorage.setItem($this.attr('name'), $(this).text()); }); $(document).click(function() { $styledSelect.removeClass('active'); $list.hide(); }); });

 .select-hidden { display: none; visibility: hidden; padding-right: 10px; }.select { cursor: pointer; display: inline-block; position: relative; font-size: 12px; color: #005ca5; height: 40px; width: 155px; }.select-styled { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #a2a2a2; padding: 10px 15px; border-radius: 20px; }.select-styled:after { content: ""; width: 0; height: 0; border: 7px solid transparent; border-color: #005ca5 transparent transparent transparent; position: absolute; top: 16px; right: 10px; }.select-styled.active { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }.select-styled.active:after { top: 9px; border-color: transparent transparent #005ca5 transparent; }.select-options { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 999; margin: 0; padding: 0; list-style: none; background-color: #fff; overflow-y: scroll; max-height: 200px; border: 1px solid #a2a2a2; border-top: 0px; }.select-options li { margin: 0; padding: 12px 0; text-indent: 15px; transition: 0.3s; }.select-options li:hover { color: #fff; background: #005ca5; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="color" id="frm-statusForm-form-color" class="select-hidden"> <option value="#E19244">Orange</option> <option value="#666666">Grey</option> <option value="#886666" selected="">Brown</option> <option value="#2FB483">Green</option> <option value="#005CA5">Blue</option> <option value="#71DFFC">Light blue</option></select>