javascript - 在 selectPicker 中为 sessionStorage 选择选项

Question

所以我创建了一个我的问题的模型。我正在使用 Select Picker 创建我的多选下拉菜单。在页面重新加载时，我想保存通过 sessionStorage 选择的选项。

我的会话存储成功运行。它获取我的选项的值并将它们存储在我的浏览器中，但是它不会以视觉方式显示给用户。

有没有办法使用 Javascript/jquery 在下拉菜单中选择选项？

另外值得一提的是，我的逻辑可能看起来有点过头了，但我使用 $(this) 来获取每个名称属性，因为我将在多个表单上使用它。

谢谢！

jsfiddle：https ://jsfiddle.net/7Lhwbzs2/3/

<!--Importing CSS stylesheets-->
<link rel="stylesheet" type="text/css"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>

<!--Importing Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
            
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<div>
  <select class="selectpicker" name="Food" data-none-selected-text="Select Option(s)..." multiple>
       <option value="Pizza">Pizza</option>
       <option value="Wings">Wings</option>
       <option value="Veggies">Veggies</option>
       <option value="Rice">Rice</option>
       <option value="Pasta">Pasta</option>
  </select>
</div>

<script>
    $('select').selectpicker({
    actionsBox: true,
  });
  $('select').each(function( index ) {
    var previousSelection = window.sessionStorage.getItem(`${$(this).attr('name')}`) ? JSON.parse(window.sessionStorage.getItem(`${$(this).attr('name')}`)): [];
    console.log(previousSelection)
  });

  $('select').on("change", function (e){
    window.sessionStorage.setItem(`${$(this).attr('name')}`, JSON.stringify($(this).val()) );
  });
</script>

标签： javascriptjquery

Answer 1

您可以像这样使用 selectpicker：

$('.selectpicker').selectpicker('val', previousSelection);

只需用此替换您的 JavaScript 代码即可。我测试了它，它工作得很好：

var previousSelection
 $('select').selectpicker({
    actionsBox: true,
  });
  $('select').each(function( index ) {
    previousSelection = 
   window.sessionStorage.getItem(`${$(this).attr('name')}`) ? 
    JSON.parse(window.sessionStorage.getItem(`${$(this).attr('name')}`)): [];
    console.log(previousSelection)
  });

  $('select').on("change", function (e){
    window.sessionStorage.setItem(`${$(this).attr('name')}`, 
   JSON.stringify($(this).val()) );
  });

  $('.selectpicker').selectpicker('val', previousSelection);