如何在重定向URL后设置选定元素？

Question

我得到了<select>元素。如果我选择了某些东西，我想通过我在<select>中的值更改URL并设置selected=selected。

尝试是这样的（jQuery的）：

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type = "text/javascript"> 

    $(document).ready(function() { 
     $('#my-select').bind('change', function() { 
      var url = $(this).val(); 
      if (url != '') { 
       window.location = url; 
       $('#my-select').find("option[value='"+url+"']").attr("selected", "selected"); 
      } 
      return false; 
     }); 
    }); 

    </script> 


<select id="my-select" name="category"> 
    <option selected> Please select... </option> 
    <option value="index.php?page=category&s=something1"> something1 </option> 
    <option value="index.php?page=category&s=something2"> something2 </option> 
</select> 

URL改变，但属性selected未设置。

我到处搜索了大约一个小时，但从来没有一个适当的例子。请原谅我英语不好。

什么问题？如何解决这个问题？

Answer 1

尝试类似的路径名这（未经测试）。

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type = "text/javascript"> 

    $(document).ready(function() { 
     $('#my-select').val(document.location); 

     $('#my-select').bind('change', function() { 
      var url = $(this).val(); 
      if (url != '') { 
       window.location = url; 

      } 
      return false; 
     }); 
    }); 

    </script> 

Answer 2

这很简单，只是在加载文档时重定向执行下一个代码之后。

$('#my-select').val(your_url); 

所以基本上我不知道什么样的价值观是你的选择，但如果他们是那么对于VAR YOUR_URL使用

document.location.pathname 

否则

document.location 

Answer 3

你可以你的用户提供了GET参数重定向要在接下来的页面加载读取。

这个JavaScript函数(taken from here)返回所有GET参数：

function getUrlVars() { 
    var vars = {}; 
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { 
     vars[key] = value; 
    }); 
    return vars; 
} 

所以，你会想要做的是这样的：

$('#my-select').bind('change', function() { 
    var selectionValue = $(this).val(); 
    if (selectionValue != ''){ 
    var getParams = getUrlVars(); 
    // Next line is deciding whether to use a '?' or a '&' 
    // depending if there were already GET parameters in the URL 
    var symbolToUse = (getParams? '&' : '?'); 

    // Remove previous instances of "selected" in the URL. 
    var url = window.location.href.replace(/[&|?]selected=\d+/g,""); 
    window.location.href = url + symbolToUse + "selected="+selectionValue; 
    } 
)} 

当用户更改为select元素，其值将被提取并附加到url。

https://repro.com/index.php?page=category&s=something2?selected=4
_{在这里我们可以看到用户已经明智地选择了鸡蛋。}

然后你包括你的document.ready回调调用getURLVars()功能 -

$(document).ready(function() { 
    var getParams = getUrlVars(); 
    if (getParams){ 
    // Here we make the selection of the <select> by setting its value 
    // to the same as that of the <option> that was chosen and 
    // placed in the URL as a GET parameter. 
    $('#my-select').val(getParams.selected); 
    } 
    ... 
)} 

，现在你的选择元素的值将是用户点击 - 前提是selected参数包含有效的值。

这也要求您的<option>标签包含value属性，仅包含选项的“id”;无需对整个URL，因为我们使用的是现有的一个 -

<select id="my-select"> 
    <option value="1">FOO</option> 
    <option value="2">BAR</option> 
    <option value="3">SPAM</option> 
    <option value="4">EGGS</option> 
</select>