Javascript如何记住用户从下拉列表中选择的内容

时间:2018-01-03 09:16:17

标签: javascript drop-down-menu

我有一个项目下拉列表。 我想要的是当用户点击列表中的一个项目时,当返回gui选择某个项目时,系统应该记住'用户过去的选择。 为了发展这个我需要考虑什么? 我为这次尝试提供了一个简单的代码。

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
jQuery(function($) {
    var locations = {
        'Office': [ 'Rome','Milano', 'New York', 'Portland', 'Paris', 'San Francisco'],
        'Country': [ 'CA', 'FR', 'IT', 'US'],
    }

    var $locations = $('#element');
    $('#attribute').change(function () {
        var attribute = $(this).val(), lcns = locations[attribute] || [];

        var html = $.map(lcns, function(lcn){
            return '<option value="' + lcn + '">' + lcn + '</option>'
        }).join('');
        $locations.html(html)
    });
});
</script>
</head>
<body>
<label class="page1">Attribute</label>
<div class="tooltips" title="Please select the attribute that the customer will primarily be served from">
    <select id="attribute" name="attribute" placeholder="Phantasyland">
        <option></option>
        <option>Office</option>
        <option>Country</option>
    </select>
</div>
<br />
<br />
<label class="page1">List of elements</label>
<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
    <select id="element" name="element" placeholder="Anycity"></select>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

您可以使用浏览器存储来存储在其会话中选择的用户。

以下网址包含localstorage api的文档。

MDN : Window.localStorage

示例

存储商品:

localStorage.setItem('yourItem', 'Value');

检索存储的项目:

localStorage.getItem("yourItem");

删除存储的项目:

localStorage.removeItem("yourItem");

以上示例仅介绍如何使用localstorage。您需要将它们添加到代码中相关操作发生的适当位置。