Question

我有一个选择列表，它有三个不同的选项。

当用户选择城市时，我想根据所选选项显示价格范围。

我也在尝试在localStorage中保存所选选项，因此如果您刷新页面，选择将保持选中状态，并且正确的价格范围保持可见。

这就是我所拥有的：

HTML

<select name="city" id="city">
    <option value="NY">New York</option>
    <option value="London">London</option>
    <option value="Paris">Paris</option>
</select>


<span id="related_ny_price">New York price</span>

<span id="related_london_price">London price</span>

<span id="related_paris_price">Paris price</span>

JS

    $('[id^="related"]').not(':first').hide();

    $("#city").on('change', function() {

--------------------------------------------        

$("#related_"+this.value+"_price").show().siblings('[id^="related"]').hide();
    });

    $(document).ready(function() {

        var item = window.localStorage.getItem('city');
        $('select[name=city]').val(item);

        $('select[name=city]').change(function() {
           window.localStorage.setItem('city', $(this).val());
        });

    });

Answer 1

DOM中没有名称为citya的元素。其次，你试图获得价值 localstorage对象中不存在的paikkakunta。你必须按照你设定的方式获得城市。

<强> HTML

<select name="city" id="city">
    <option value="NY">New York</option>
    <option value="London">London</option>
    <option value="Paris">Paris</option>
</select>
<span id="related_ny_price">New York price</span>

<span id="related_london_price">London price</span>

<span id="related_paris_price">Paris price</span>

<强> JS

$('[id^="related"]').not(':first').hide();

$("#city").on('change', function() {
  $("#related_" + this.value + "_content").show().siblings('[id^="related"]').hide();
});

$(document).ready(function() {

  //get city
  var item = localStorage.getItem('city');
  $('select[name=city]').val(item);

  //change the selector. There is no element with name citya in DOM
  $('select[name=city]').change(function() {
    //set city
    localStorage.setItem('city', $(this).val());
  });

});

fiddle

如何将选择和跨度存储到本地存储？

1 个答案: