Question

以下是两个选择框，我需要的是如果从两个框中选择了值，两者都应显示在URL中，类似这样例如 www.example.com＃135 +＃140 或 www.example.com＃135＆amp; 140 （只要两者都显示出这是主要目的，哪个顺序无关紧要）

 <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中的#search_regions值，到目前为止它完美无缺。现在能够将#search_categories值添加到该值。

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

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

这是我之前提出的问题的补充，找到下面的链接

Getting the select value to display in a new browser

Answer 1

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').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中显示两个单独的选择框值

1 个答案: