在URL中显示两个独立的选择框值 [英] Displaying two seperate select box values in a URL

问题描述

这里有两个选择框，我需要的是如果从两个框中选择了值，则两者都应显示在URL中，例如
，例如 www.example.com＃135 +＃ 140 或者 www.example.com＃135& 140
（只要显示的都是这个序列的主要目标，哪个序列无关紧要） p>

 < select name =search_regionid =search_regionclass =search_region> 
< option value =0>所有区域< / option> 
< option class =level-0value =135> HTML< / option> 
< option class =level-0value =136> PHP< / option> 
< option class =level-0value =137> CSS< / option> 
< / select> 
 
< select name =search_categoriesid =search_categoriesclass =search_categories> 
< option value =>选择类别< / option> 
< option class =level-0value =140> Java< / option> 
< option class =level-0value =141>脚本< / option> 
< / select> 
  

以下是我正在运行的用于在URL中显示#search_regions值的脚本，到目前为止作品完美。现在可以添加#search_categories值。

 < script type =text / javascript> 
 $（function（）{
 $（'＃search_region'）。change（function（）{
 var url = $（this）.val（）; 
窗口。 location.hash = url; 
 console.log（'select Changed'）; 
}）; 
}）; 
 window.addEventListener（'hashchange'，fn，false）; 
 
 window.onload = fn; //在页面加载时触发
 
函数fn（）{
 $（'＃search_region'）.val（window.location.hash.replace（'＃'，''））; 
 console.log（hash =+ window.location.hash）; 
} 
< / script> 
  

关于如何做到这一点的任何想法？这将是非常感谢

这是我以前提出的问题的一个补充，查找下面的链接

让选择值在新浏览器中显示

解决方案

1.您需要应用两个选择框的更改事件。

2.您还需要将第二个选择框值添加到 window.location.hash 中。

工作摘要：

  $（function（）{var url =''; $（'＃search_region'）。change（function（）{url = $（this）.val（）; window.location.hash = url; console.log（window.location.hash）;}）; $（'＃search_categories'） ange（function（）{if（url！==''）{window.location.hash = url +&+ $（this）.val（）; } console.log（window.location.hash）; }）;}）; window.addEventListener（'hashchange'，fn，false）; window.onload = fn; // fire on pageloadfunction fn（）{console.log（hash =+ window.location.hash）;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< select name =search_regionid =search_regionclass =search_region> < option value =0>所有区域< / option> < option class =level-0value =135> HTML< / option> < option class =level-0value =136> PHP< / option> < option class =level-0value =137> CSS< / option> < /选择> < select name =search_categoriesid =search_categoriesclass =search_categories> < option value =>选择类别< / option> < option class =level-0value =140> Java< / option> < option class =level-0value =141> Script< / option> < / select>  

Here are both select boxes, what I need is if there are values selected from both boxes, both should be displayed in the URL, something like this e.g www.example.com#135+#140 OR www.example.com#135&140 (It doesn't matter in which sequence as long as both gets displayed that's the main aim of this)

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

    <select name="search_categories" id="search_categories" class="search_categories">
        <option value="">Select Category</option>   
        <option class="level-0" value="140">Java</option>
        <option class="level-0" value="141">Script</option>
    </select>

Below is this script I'm running to display the #search_regions value in the URL, so far it works perfect. Now to be able to add the #search_categories value to that.

<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>

Any ideas on how to do this? it would be much appreciated

It's an add on from my previously asked question, find link below

Getting the select value to display in a new browser

解决方案

1.You need to apply change event of both select-box.

2.You need to add second select-box value to the window.location.hashalso.

Working snippet:-

$(function(){
   var url = '';
    $('#search_region').change(function () {
        url = $(this).val();
        window.location.hash = url;
         console.log(window.location.hash);
    });
    $('#search_categories').change(function () {
       if(url !==''){
         window.location.hash = url+"&"+$(this).val();
       }
        console.log(window.location.hash);
    });
});

window.addEventListener('hashchange', fn, false);

window.onload = fn; // fire on pageload

function fn() {
    console.log("hash = " + window.location.hash);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="search_region" id="search_region" class="search_region">
        <option value="0">All Regions</option>
        <option class="level-0" value="135">HTML</option>
        <option class="level-0" value="136">PHP</option>
        <option class="level-0" value="137">CSS</option>
    </select>

    <select name="search_categories" id="search_categories" class="search_categories">
        <option value="">Select Category</option>   
        <option class="level-0" value="140">Java</option>
        <option class="level-0" value="141">Script</option>
    </select>

这篇关于在URL中显示两个独立的选择框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！