获取选择值以在新浏览器中显示 [英] Getting the select value to display in a new browser

问题描述

Hey so basically this is my code, the first script running allows the selected value to be displayed in the URL.

嘿，所以基本上这是我的代码，第一个脚本运行允许选择的值显示在URL中。 <！ - 将选定的值添加到当前的网址扩展名 - >
< script>
$（function（）{
var collectParams = function（）{
var params = {
Region：$（＃search_region）。val（）
};

if（params.Region）{
location.hash = jQuery.param（params）
}
};

$（＃search_region）。change（collectParams）;
}）;
< / script>

<！ - 将选定的值添加到当前的网址扩展名 - >

< select name =search_regionid =search_regionclass =search_region>
< option value =0>所有区域< / option>
< option class =level-0value =135> 135< / option>
< option class =level-0value =136> 136< / option>
< option class =level-0value =137> 137< / option>
< option class =level-0value =139> 139< / option>
< option class =level-0value =138> 138< / option>
< / select>

<!-- Adds selected value to current url extensions --> <script> $(function() { var collectParams = function() { var params = { Region:$("#search_region").val() }; if(params.Region) { location.hash=jQuery.param(params) } }; $("#search_region").change(collectParams); }); </script> <!-- Adds selected value to current url extensions --> <select name="search_region" id="search_region" class="search_region"> <option value="0">All Regions</option> <option class="level-0" value="135">135</option> <option class="level-0" value="136">136</option> <option class="level-0" value="137">137</option> <option class="level-0" value="139">139</option> <option class="level-0" value="138">138</option> </select>

以下是第二个运行的脚本。它用来存储选择，它一切正常，但有没有什么办法保持选择存储一旦我复制链接以及存储的选定值（ eg：www.example / dropdown-test.html＃Region = 137 ）到另一个浏览器，或者如果有其他人使用它来让我以前的选择存储和显示在他们身边？

Below is the second script running. It's used to store the selection, it all works fine but is there any way to keep the selection stored once i copy the link along with stored selected value (eg: www.example/dropdown-test.html#Region=137) to another browser or if anyone else uses it for it to have my previous selection stored and displayed on their side?

<!-- Stores selected value locally after page refresh -->
 <script>
$(function() {
    if (localStorage.getItem('search_region')) {
        $("#search_region option").eq(localStorage.getItem('search_region')).prop('selected', true);
    }

    $("#search_region").on('change', function() {
        localStorage.setItem('search_region', $('option:selected', this).index());
    });

});
 </script>
 <!-- Stores selected value locally after page refresh -->

我不确定这是否合理，但这是我能解释的最好的。
我也只需要能够做到这一点与JavaScript没有PHP

I'm not sure if this makes sense but that's the best i can explain. I also only need to be able to do this with javascript no php

在此先感谢

Thanks in advance

推荐答案

在链接被复制时，将以前选定的＃值存储在URL中并将其传送到其他用户PC。如果有更简单的方法，hola

Stores previous selected # value in URL and carries it over to another users PC when link is copied. If there's any simpler way of doing it, hola

<select name="search_region" id="search_region" class="search_region">
        <option value="0">All Regions</option>
        <option class="level-0" value="135">135</option>
        <option class="level-0" value="136">136</option>
        <option class="level-0" value="137">137</option>
        <option class="level-0" value="139">139</option>
        <option class="level-0" value="138">138</option>
    </select>


     <script type="text/javascript">
    $(function(){
        $('#search_region').change(function () {
            var url = $(this).val();
            window.location.hash = url;
            console.log('select Changed');
        });
    });
    window.addEventListener('hashchange', fn, false);

    window.onload = fn; // fire on pageload

    function fn() {
        $('#search_region').val(window.location.hash.replace('#', ''));
        console.log("hash = " + window.location.hash);
    }
     </script>

这篇关于获取选择值以在新浏览器中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！