自定義 select 在頁面刷新后顯示所選值

Question

我正在嘗試構建我的自定義 select 但我被卡住了。 在頁面刷新之前一切正常。 我是 jQuery 初學者，我在 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>

我正在使用 php，當我使用 select 一個值時，它會保存選定的值。 在源代碼中，您可以在默認 select 選擇值中看到，但在我的自定義 select 中看不到。 Select 是自動生成的，所以我無法更改 HTML。 所以唯一的辦法就是改jQuery...

Answer 1

您可以使用localeStorage API進行此類實現，localeStorage 具有.setItem()和.getItem()方法，即使在刷新后，您也可以在其中設置要在應用程序中使用的值，

變化：

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

並在$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());
});

這是一個工作jsfildde ，也是一個片段，但它不會在這里工作，因為 stackoverflow 片段是沙盒的並且無法訪問 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>