Question

我想要实现的目标如下：

当用户更改选择框中的选定值时，它将刷新页面，将选定的文本值添加到现有URL，并将选择框默认重置为用户在页面刷新之前选择的值。

任何想法我做错了什么？

HTML code：

<select class="selectedForm">
    <option value="one" selected>one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    <option value="four">four</option>
</select>

Javascript代码：

$(".selectedForm").change(function() {    
   $('.selectedForm option:contains(' + this.value + ')').prop({selected: true});    
   alert( $('.selectedForm').find(":selected").val() );
   if ( window.location.href.indexOf("&") > -1 )  {
       window.location.search = '?toWhere=Cursos&q='+$('.selectedForm').find(":selected").text();
   } else {
       window.location.search += '&q='+$('.selectedForm').find(":selected").text();
   }
});

FIDDLE

Answer 1

来自get-url-parameters-values-with-jquery，

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

$(function(){
   var q= getUrlVars()["q"];
   if(q){
       $('.selectedForm option:contains('+q+')').prop('selected',true);
   }    
});

如果您使用的是server side script PHP，那么使用$_GET或$_REQUEST

会更容易

此外，您可以更改您的下拉onchange事件，例如

$(".selectedForm").change(function () {
    if (window.location.href.indexOf("&") > -1) {
        window.location.search = '?toWhere=Cursos&q=' + $('.selectedForm option:selected').text();
    } else {
        window.location.search += '&q=' + $('.selectedForm option:selected').text();
    }
});

某事like that

Answer 2

要在重新加载后保留选择器的值，您可以使用以下内容：

$(".selectedForm").on('change', function() {
  var _loc = String(location.href)
      ,loc  = _loc.substr(0, _loc.lastIndexOf('/'));
      self.location.href = loc + '?selected='+this.value;
});

// handler to load the selected option on page load
function loadSelectedOpt() {
    var loc = location.search;
    if (loc.length) {
        $(".selectedForm").val(loc.split('=')[1]);
    }
}

单词：将选定的选项值添加到当前位置的查询字符串（?selected=[selected value]），重新加载页面，并在重新加载页面时使用查询字符串设置选择器的值。

这是jsFiddle演示

Answer 3

这可以通过将值存储在localstorage中，也可以在页面加载时将值再次设置为下拉列表。这是前端唯一的方法。

否则，您可以通过将值发送到后端并返回页面加载来完成此操作。

希望这能解决你的问题！

Answer 4

这里缺少的是页面刷新后，重新加载所有资源。由于下拉列表和您的javascript已重新加载，因此this.value将没有您要设置下拉列表的有效值。

您可以使用本地存储，也可以只从查询字符串中检索以前选择的值。此外，您需要在页面的load事件期间进行设置。这是一个例子：

$(document).ready( function(){
    var queryStringBegin = window.location.search.indexOf("&q=");

    if ( queryStringBegin > -1 )  {
        var queryStrValue = window.location.search.substr(window.location.search.indexOf('&q=')+3);
        $('.selectedForm option:contains('+queryStrValue+')').prop({selected: true});
    }
});

注意：如果'&q='并不总是查询字符串的最后一部分，则可能需要进一步检查。

单击时更改所选选项

4 个答案: