这里有两个选择框,我需要的是如果从两个框中都选择了值,两者都应该显示在 URL 中,例如 www.example.com#135+#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>
关于如何做到这一点的任何想法?
这是我之前问过的问题的补充
获取要在新浏览器中显示的选择值
在一个步骤中构建网址参数,然后在另一个步骤中更新窗口位置。
也就是说,location.hash 是任何以哈希开头的参数,我不知道它将如何处理多个带有哈希的参数。
以下是更新 URL 的一种方法:
$(function() {
$('#search_region,#search_categories').change(function() {
console.log(window.location.href + '#' + $('#search_region').val() + '#' + $('#search_categories').val());
});
});
<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>