单击时更改选择的选项

Question

我要实现的目标如下：

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

有什么想法我做错了吗？

HTML代码：

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

小提琴

Answer 1

从带有jQuery的get-url-parameters-values值中 ，

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

像这样

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] ），重新加载页面，并在重新加载页面时使用querystring设置选择器的值。

这是一个jsFiddle演示

Answer 3

这可以通过将值存储在本地存储中来完成，并且在页面加载时，您必须再次将值设置为下拉列表。 这是前端的唯一方法。

否则，您可以通过将值发送到后端并重新加载页面来实现。

希望这能解决您的问题！

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='并非始终是查询字符串的最后一部分，则可能需要进一步检查。