Question

这是我的下拉代码，它根据所做的选择创建一个查询字符串。我想弄清楚的唯一一项是如何在页面重新加载时保留选择。

<html>
<select id="categoryFilter">
<option value=""></option>
<option name="Category1" id=Category1 value=".">All</option>
<option name="Category2" id=Category2 value="2.1">Processors</option>
<option name="Category3" id=Category3 value="2.4">GPU</option>
<option name="Category4" id=Category4 value="1">Corporate</option>
</select>

<script>
function setSelectedIndex(s, valsearch)
{
// Loop through all the items in drop down list
for (i = 0; i< s.options.length; i++)
{    
    if (s.options[i].value == valsearch)
    {
        // Item is found. Set its property and exit
        s.options[i].selected = true;
        break;
    }
 }
return;
}

function Filter_Init()
{
    var fvalue= JSRequest.QueryString['categoryFilter'];
    setSelectedIndex(document.getElementById('categoryFilter'), decodeURI(fvalue));
}

$('#categoryFilter').change(function() {
window.location = 'http://' + location.hostname + location.pathname + '?' +       $("#categoryFilter option:selected").attr('id') + '=' + $("#categoryFilter option:selected").val() + '#2';
Filter_Init();
});

Answer 1

你必须在页面加载时解析查询参数的url字符串，然后有一些逻辑来定位相应的元素并使其“被选中”。你最有可能在服务器端语言中做得更好，所以没有'flash'（在一个状态下加载元素而不是在DOM加载后改为另一个状态）。

尝试这样的Javascript实现： How can I get query string values in JavaScript?

Answer 2

这就是解决这个问题的方法。

在页面加载时提取查询字符串。

How can I get query string values in JavaScript?
根据传入的查询字符串选择正确的选项。

我在你的查询中注意到的一件事是你发送的查询类似于？Category2 = 2.1，在我看来它有点不灵活。从长远来看，像？id = Category2＆amp; value = 2.1这样的东西可能更灵活。

这个JS库是URL解析器库的理想选择。

http://blog.stevenlevithan.com/archives/parseuri

如何在页面重新加载时保留下拉列表选择

2 个答案: