Javascript 单击时更改所选选项

我努力实现的目标如下：

当用户更改选择框中的选定值时，它将刷新页面，将选定的文本值添加到现有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>

---

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

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

希望这能解决你的问题

来自

---

这里缺少的是在页面刷新后，所有资源都会重新加载。由于下拉列表和javascript已重新加载，因此此.value将不会具有设置下拉列表所需的有效值

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

$(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=”不总是查询字符串的最后一部分，则可能需要进一步检查

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

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

换句话说：将所选选项值添加到当前位置的querystring？selected=[selected value]，重新加载页面，并在重新加载页面时使用querystring设置选择器的值

---

这里有一个演示

您是说刷新后，选择控件中的值在默认情况下不会被选中吗？@cackharot nop。我想说的是，选择的默认值需要更改为user@KooiInc你是说要从第一个元素中删除：selected？我想他想说的是，他希望用户从selectbox中选择一些内容，然后重新加载页面，无论出于什么原因，我还没有掌握，在重新加载之后，选择框仍应具有以前选择的值？所有这些都没有服务器端代码/纯javascript。您需要将值设置为ready。因为您是在url中设置的，所以可以从那里读取。

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

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

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