由于Javascript，HTML中的下拉菜单为空

Question

我已经在html网页中创建了一个带有四个选项的下拉菜单。效果很好，但我意识到刷新页面后，该值会将自己重置为第一个选项。由于我希望将用户的选择保留在内存中，因此我在某个地方添加了一个javascript代码段。

效果很好，只是在初始化时下拉列表的默认值为一个空字段。

我需要第一个选项在初始化时显示。

我想这很简单，但我一点也不了解JavaScript。您能帮忙吗？

这是代码的样子：

<select name="options" id='dropdown'>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
  <option value="4">4th Option</option>
 </select>


 <!-- The script below helps to keep in memory the dropdown value after the page has been refreshed -->

  <script type="text/javascript">

    var selectedItem = sessionStorage.getItem("SelectedItem");  
    $('#dropdown').val(selectedItem);

    $('#dropdown').change(function() { 
    var dropVal = $(this).val();
    sessionStorage.setItem("SelectedItem", dropVal);
    });
 </script>

Answer 1

我认为您应该检查SessionStorage密钥是否存在。

我已经创建了您的代码的工作示例：https://jsfiddle.net/vieckys/Lwv1n8p7/7/

这里是HTML标记：

<select name="options" id='dropdown'>
  <option value="0" selected>--- select here ---</option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
  <option value="4">4th Option</option>
</select>

和JS代码

 let selectedItem = sessionStorage.getItem("SelectedItem");

 if (selectedItem) {
    $('#dropdown').val(selectedItem);
 } else {
   $('#dropdown').val(0);
 }

 $('#dropdown').change(function() { 
    let dropVal = $(this).val();
    sessionStorage.setItem("SelectedItem", dropVal);
 });

让我知道您是否对此有任何疑问。

Answer 2

根据您的情况，您可以使用选择下拉菜单中的trigger('change')为下拉菜单设置值后显式触发更改事件。这将运行更改功能，并将初始值保存在sessionStorage中。因此，添加以下代码行，$('#dropdown').trigger('change')类似：

<script type = "text/javascript" >

var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);

$('#dropdown').change(function() {
  var dropVal = $(this).val();
  sessionStorage.setItem("SelectedItem", dropVal);
});
$('#dropdown').trigger('change'); // trigger the change explicitly
</script>