Question

我有<select>元素。如果我选择了某些内容，我希望按URL中的值更改<select>并设置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);

所以基本上我不知道你的选择中有哪些值，但是如果它们是pathNames则使用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
_{在这里我们可以看到用户明智地选择了鸡蛋。}

然后，您在getURLVars()回调中加入对document.ready功能的调用 -

$(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);
  }
  ...
)}

现在您的select元素将具有用户点击的值 - 前提是selected参数包含有效值。

这还要求您的<option>代码包含value属性，且只包含该选项的“id”;我们使用现有的URL不需要整个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>

Answer 4

由于我从stackoverflow（包括这篇文章）中学到了很多东西......我发布了解决这个问题的方法。此代码已经过测试并正在运行。当你使用像PHP这样的服务器端脚本构建html页面时，做这样的事情会派上用场。

<script type = "text/javascript">
            jQuery(document).ready(function() {
              jQuery('#service-select').val(window.location.href); //set selected element of dropdown to be same as current page's address  
              //console.log(window.location.href); do this and check the console to see the exact value of this property
                jQuery('#service-select').bind('change', function () { 
                    var url = jQuery(this).val(); 
                    if (url != '') {
                        window.location = url; // redirect
                    }

                    return false;
                });
            });
</script>

要记住一些重要的事情 - 我使用jQuery（）而不是$（），因为我的解决方案是为WordPress编写的，$（）并不适合用它：）

由于我使用WP，我已经在其他地方调用了jQuery库。只要确保你在标记的某个地方有呼叫。

这样做的：

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

建议不适合我。

我建议使用console.log（）并打印出document.location，window.location等的确切值，以便在选项元素中匹配它。

在我的情况下，我错过了我的HTML中的尾随/它因为http://example.com/beans和http://example.com/beans/

之间没有匹配而无法正常工作

无论如何，希望这有帮助。

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

4 个答案: