javascript - 自定义选择在页面刷新后显示所选值

Question

我正在尝试构建我的自定义选择，但我被卡住了。在页面刷新之前一切正常。我是一个 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 是自动生成的，所以我无法更改 HTML。 所以唯一的方法是改变jQuery ...

标签： javascripthtmljquery

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>