时间戳

首页 > 解决方案 > 使用会话存储在下拉搜索框中进行搜索时如何返回选择的特定类别

javascript - 使用会话存储在下拉搜索框中进行搜索时如何返回选择的特定类别

问题描述

我有一个自定义 wp 搜索框，允许在类别中搜索。搜索框正在工作，但我遇到了一个我无法解决的问题，希望能得到您的帮助。目标是我需要显示在搜索过程中选择的类别。我正在尝试使用会话存储来做到这一点。

HTML

<select id="dropdown" class="special-search-select-box search-translation-select translation-select-default 
form-control" name="category_name">

<option id="opt1" class="saveInput" value="good-news-translation-gnt">Good News Translation (GNT)</option>
<option id="opt2" class="saveInput" value="king-james-version-kjv" selected="selected">King James Version (KJV)</option>
<option id="opt3" class="saveInput" value="new-international-version-niv">New International Version (NIV)</option>
<option id="opt4" class="saveInput" value="new-king-james-version-nkjv">New King James Version (NKJV)</option>
<option id="opt5" class="saveInput" value="revised-standard-version-rsv">Revised Standard Version (RSV)</option>

</select>

<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
$( document ).ready(function() {
  console.log( "ready!" );
  if(typeof(Storage) !== 'undefined'){
    populateInputs();
  }

  function populateInputs(){
      console.log('Populating');
      for(var i=0; i<sessionStorage.length; i++) {
        var temp = sessionStorage.key(i);
        if(temp.startsWith('inputData')) {
            console.log('Setting ' + temp.split('-')[1] +
          ' to ' + sessionStorage.getItem(temp));
            $('#'+temp.split('-')[1]).val(sessionStorage.getItem(temp));
        }
      }
  }

  $('.saveInput').on('option', function(){
      console.log(this.id + ' has ' + this.value);
      sessionStorage.setItem('inputData-'+this.id, this.value);
  });
</script>

原谅我的错误。请帮我解决这个问题。谢谢你。

标签： javascriptjquery

解决方案

用这个替换上面的脚本

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://github.com/yckart/jquery.storage.js"></script>
 <script>    
$(function () {

    $("#savese").click(function () {

         var item =  $("#dropdown option:selected").text();

          sessionStorage.setItem("sele", item); 
          });    

          var ty = sessionStorage.getItem("sele");

          if(ty){
            //Set the value of select from sessionStorage
                $('#dropdown option').filter(function () { return $(this).html() == ty; }).prop('selected', true);                            
           }   
        });              
</script>

为搜索按钮分配一个 ID，例如我在此处所做的，以便在单击按钮时保存数据。我的被​​调用#savese并sele保持不变。

这对我来说非常有效，很高兴我在寻找解决方案数小时后能够解决这个问题。希望答案对某人有所帮助。

推荐阅读