javascript - 在本地存储中保存动态创建的列表框-6ren

javascript - 在本地存储中保存动态创建的列表框

转载作者：行者123 更新时间：2023-11-28 00:00:54

我制作了一张谷歌地图，在“源”列表框中列出了可能的映射位置。您可以选择任意多个，然后按一个按钮，它们就会转到下一个列表框。一旦你按下“ map 位置”按钮，它们都会被映射。我已经尝试并失败了，以获取动态列出的所需位置以使用本地存储进行保存和调用，因此当用户返回页面时，他们最后的位置仍然存在。这对于使用 ipad 和其他平板电脑的用户来说很重要。有人可以帮助将动态创建的选项保存在列表框中吗？我已经阅读了很多关于本地存储的文章，但这似乎是一个独特的情况。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>     

        <style type='text/css'>
            #map-canvas { width:940px; height:625px; }
            .layer-wizard-search-label { font-family: sans-serif };

        </style>
        <script type='text/javascript'>//<![CDATA[ 
            var map;
            var layer_0;
            var destSelect;
            var filter;

            function initialize() {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: new google.maps.LatLng(47.724544549099676, -100.43701171875), 
                    scaleControl: true,
                    zoom: 7, //zoom
                    zoomControl: true,
                            zoomControlOptions: {
                            style: google.maps.ZoomControlStyle.LARGE,
                            position: google.maps.ControlPosition.TOP_LEFT},
                    mapTypeId: google.maps.MapTypeId.ROADMAP //the map style
            });

            layer_0 = new google.maps.FusionTablesLayer({
                map: map
            });
            ///Storage
            filter = document.getElementById("filter");
            destSelect = document.getElementById("destSelect");

            if (localStorage.locations)
                destSelect.value = localStorage.locations;

            }

            function saveChoice() {
                localStorage.locations=destSelect.value;    
                console.log + localStorage.locations;
            }
            ///
            function changeMap_0() {
                var query={
                    select: "'geometry'",
                    from: "1xDlCWWj4WMCadzaua5bBss3UNLprGCnsS3H4vt0"
                },
                values=[],
                options=document.getElementById('destSelect').options;

                if(!options.length){
                    //no options added, remove the layer
                    //and leave the function
                    layer_0.setMap(null);
                    return;
                } 

                //collect the values  
                for(var i =0;i<options.length;++i){
                    values.push(options[i].value.replace(/'/g, "\\'"));
                }
                //create where-clause
                query.where="'Well Name' IN('"+values.join("','")+"')";

                //set the options  
                layer_0.setOptions({query:query,map:map}); 
            }
            function listboxMoveacross(sourceID, destID) {
                var src = document.getElementById(sourceID);
                var dest = document.getElementById(destID);

                for(var count=0; count < src.options.length; count++) {

                    if(src.options[count].selected == true) {
                            var option = src.options[count];
                            var newOption = document.createElement("option");
                            newOption.value = option.value;
                            newOption.text = option.text;
                            newOption.selected = true;
                            try {
                                    dest.add(newOption, null); //Standard
                                    src.remove(count, null);
                            }catch(error) {
                                    dest.add(newOption); // IE only
                                    src.remove(count);
                            }
                            count--;
                    }
                }
            }
            google.maps.event.addDomListener(window, 'load', initialize)
        </script>


    </head>
    <body>
        <div id="map-canvas"></div> 
        <table>
            <tbody>
                <tr>
                    <td>
                        <select id="filter" multiple="1">
                            <option value="101 FEDERAL  21X-24">101 FEDERAL  21X-24</option>
                            <option value="13 MILE SWD  1">13 MILE SWD  1</option>
                            <option value="2-BRENDEN  9-33 1-M">2-BRENDEN  9-33 1-M</option>
                            <option value="20002 JV-P AGATE     1">20002 JV-P AGATE     1</option>
                            <option value="20002 JV-P AGATE     2">20002 JV-P AGATE     2</option>
                        </select>

                    </td>
                    <td>
                        <button onclick="listboxMoveacross('filter', 'destSelect');">&gt;&gt;</button>  <br>
                        <button onclick="listboxMoveacross('destSelect', 'filter');">&lt;&lt;</button>
                    </td>
                    <td>
                        <select id="destSelect" size="10" multiple="" onchange="saveChoice()">
                        </select>
                    </td>
                </tr>

            </tbody>
        </table>
        <button id="mapbutton" onClick="changeMap_0(map);">Map Locations</button>
    </body>
</html>

最佳答案

您有两个 listboxMoveacross() 实例 - 为什么？正如@Anto Jurković 评论的那样，onchange 不会发生任何事情。相反

每次修改时保存destSelect中的所有项目
在 initialize() 上加载列表，将它们添加到 destSelect 并将它们从 filter 中删除。

保存到存储，在你的 listboxMoveacross() 中调用它:

function saveToStorage() {
    var destSelect=document.getElementById("destSelect");
    for (var i=0;i<destSelect.length;i++) {
        localStorage.setItem('option_'+i, destSelect.options[i].text);
    }
}

在 initalize() 中检索存储的选项并从 filter 中删除存储的选项:

function loadFromStorage() {
    var destSelect=document.getElementById("destSelect");
    var filter = document.getElementById("filter");
    var filterOut = [];
    for (var i=0;i<filter.length;i++) {
        var storedOption=localStorage.getItem('option_'+i);
        if (storedOption != 'null' && storedOption != null) {
            var option = document.createElement('option');
            option.value = storedOption;
            option.innerHTML = storedOption;
            destSelect.appendChild(option);
            filterOut.push(option);
        }
    }
    //remove stored options from filter
    for (var i=filter.length;i>=0;i--) {
        for (var t=0;t<filterOut.length;t++) {
            if (filter.options[i]!=undefined) {
                if (filter.options[i].text.localeCompare(filterOut[t].text)==0) {
                    filter.removeChild(filter[i]);
                }
            }
        }
    }
}

请参阅上面的代码和我的添加 -> http://jsfiddle.net/3AHwz/ 向 destSelect 添加一些值，然后重新加载。

关于javascript - 在本地存储中保存动态创建的列表框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21440605/

文章推荐： php - 我怎么知道图像是否会导致 php memory_limit 错误？

文章推荐： html - 3级CSS子菜单悬停状态

文章推荐： javascript - 在javascript中将XML属性转换为HTML标签

c# - Azure 存储(经典)与 Azure 存储 (V2) 代码不适用于 V2 存储
我正在运行一个辅助角色，并检查 Azure 上托管的存储中是否存在数据。当我将连接字符串用于经典类型的存储时，我的代码可以正常工作，但是当我连接到 V2 Azure 存储时，它会抛出此异常。 “远程服
javascript - HTML5 Web 存储 - 存储 JSON 数据然后检索它
在我的应用程序的主页上，我正在进行 AJAX 调用以获取应用程序各个部分所需的大量数据。该调用如下所示: var url = "/Taxonomy/GetTaxonomyList/" $.getJSO
vue.js - "export ' 存储 ' was not found in ' ../存储'
大家好，我正在尝试将我的商店导入我的 Vuex Route-Gard。路由器/auth-guard.js import {store} from '../store' export default
c# - Azure Blob 存储 - 上传 Blob 后如何获取 Blob 存储 ID？
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure，并将 Blob ID 存储在我们的数
python - 设置 Mlflow 后端 (SQLite) 和工件(Azure Blob 存储)存储
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
c# - Azure Blob 存储 - 上传 Blob 后如何获取 Blob 存储 ID？
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure，并将 Blob ID 存储在我们的数
python - 设置 Mlflow 后端 (SQLite) 和工件(Azure Blob 存储)存储
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
python - 使用适用于 Python 的 Azure 存储 SDK 将多个文件从文件夹上传到 Azure Blob 存储
我的 Windows 计算机上的本地文件夹中有一些图像。我想将所有图像上传到同一容器中的同一 blob。我知道如何使用 Azure Storage SDKs 上传单个文件BlockBlobServi
javascript - 向 Azure Blob 存储 [REST API][Azure Blob 存储] 发出 GET 请求时授权失败
我尝试发出 GET 请求来获取我的 Azure Blob 存储帐户的帐户详细信息，但每次都显示身份验证失败。谁能判断形成的 header 或签名字符串是否正确或是否存在其他问题？代码如下: cons
javascript - NeutralinoJS 存储
这是用于编写 JSON 的 NeutralinoJS 存储 API。是否可以更新 JSON 文件(推送数据)，而不仅仅是用新的 JS 对象覆盖数据。怎么做到的？？？ // Javascript
jenkins - 在调用并行阶段之前运行脚本(存储)
我有一个并行阶段设置，想知道是否可以在嵌套阶段之前运行脚本，所以像这样: stage('E2E-PR-CYPRESS') { when { allOf {
virtualbox - VBoxManage列出虚拟机详细信息(存储)
我想从命令行而不是从GUI列出VirtualBox VM的详细信息。我对存储细节特别感兴趣。当我在GUI中单击VM时，可以看到包括存储部分在内的详细信息: 但是到目前为止，我还没有找到通过命令行执行
rdbms - 存储/访问有向图的最佳方式
我有大约 3500 个防洪设施，我想将它们表示为一个网络来确定流动路径(本质上是一个有向图)。我目前正在使用 SqlServer 和 CTE 来递归检查所有节点及其上游组件，只要上游路径没有 fork
Jquery data() 存储
谁能告诉我 jquery data() 在哪里存储数据以及何时删除以及如何删除？如果我用它来存储ajax调用结果，会有性能问题吗？例如: $("body").data("test", { myDa
Firebase 存储 - 如何设置备份
有人可以建议如何为 Firebase 存储中的文件设置备份。我能够备份数据库，但不确定如何为 firebase 存储中的文件(我有图像)设置定期备份。最佳答案如何进行 Firebase 存储的本地
Firebase 存储 - 图像预览正在永久加载
我最近开始使用 firebase 存储和 firebase 功能。现在我一直在开发从功能到存储的文件上传。我已经让它工作了(上传完成并且文件出现在存储部分)，但是，图像永远保持这样(永远在右侧加载)
Firebase 存储 – 不能删除大小要求
我想只允许用户将文件上传到他们自己的存储桶中，最大文件大小为 1MB，仍然允许他们删除文件。我添加了以下内容: match /myusers/{userId}/{allPaths=**} { al
Azure 存储 - 数据湖生命周期管理问题
使用生命周期管理策略将容器的内容从冷访问层移动到存档。我正在尝试以下策略，希望它能在一天后将该容器中的所有文件移动到存档层，但事实并非如此在职的。我设置了选择标准“一天未使用后”。这是 json 代
Azure 存储，在安全性和速度之间进行选择
对于连接到 Azure 存储端点，有 http 和 https 两个选项。第一。 https 会带来开销，可能是 5%-10%，但我不支付同一个数据中心的费用。第二。 http 更快，但 Auth
Azure 存储 vhd
有人可以帮我理解这一点吗？我创建了Virtual Machine in Azure running Windows Server 2012 。我注意到 Azure 自动创建了一个存储帐户。当我进入该存

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在本地存储中保存动态创建的列表框