页面重定向后，使用选定的选项文本更新下拉菜单文本

Update dropdown menu text with selected option text after page redirect

本文关键字：文本 选项 更新 下拉菜单 重定向      更新时间：2023-09-26

您好，我想在页面重定向和重新加载下拉列表后，使用选定的选项文本更新下拉文本。这是我的代码 

<div class="sorting-option">
    <select id="selectdropdown" class="dropdown-select">
        <option value="">Recommended Items</option>
        <option value="?sort1desc=F&sort1=Item_NAME">Name (A-Z)</option>
        <option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
        <option value=".f?sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE">Price (Low- 
High)   
        </option>
        <option value=".f?sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE">Price (High 
Low) 
        </option>
    </select>
</div>

当我从此下拉列表中选择任何选项时，它会加载页面并打开该选项的值部分中的链接。每次页面加载后，我只看到重新定义的项目选项文本，而不是我从下拉列表中选择的文本。就像如果我选择名称 （Z-A） 一样，它应该在页面加载后更新为下拉列表中的名称 （Z-A）。

到目前为止，我已经尝试了此代码，但它没有给我预期的结果

$(document).ready(function () {
        $('#selectdropdown').change(function () {
            location.href = $(this).val();
            $("#selectdropdown option:selected").text();
        });
    });

您可以在 <select> 的选项中使用选定的属性。将 name 属性放入 select，当您提交表单时，在页面加载后获取相同的属性，并放置一个条件，以便选择该项目。

<if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif>

喜欢：

<div class="sorting-option">
    <select id="selectdropdown" class="dropdown-select" name= "selectdropdown">
        <option value="">Recommended Items</option>
        <option value="?sort1desc=F&sort1=Item_NAME" <if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif> >Name (A-Z)</option>
        <option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
    </select>
</div>

对所有选项都相同。

您可以按照以下步骤操作。

  1. 在 url 中传递所选值。

  2. 当页面加载时，您可以从 URL 检查这些值，以使值自动选中。

$(document).ready(function() {
  $("#social").change(function(event) {
    var target_url = $(this).val();
    //pass the target url in the url scope
    var redirect_url = target_url + "?social=" + target_url;
    location.href = redirect_url;
  });
  //on page load get the url values to select it from dropdown.
  var urlvars = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  var keys = urlvars[0].split('=');
  var default_select = keys[1];
  $('#social').val(default_select);
});
<form>
  <select id="social">
    <option value="http://localhost/index.cfm">Default</option>
    <option value="http://localhost/a.cfm">Google</option>
    <option value="http://localhost/b.cfm">Facebook</option>
  </select>
</form>

您可以检查 sort1desc 的 url 参数并将值分配给选择框。这是jquery代码。

$(document).ready(function () {
    var sortParam = getUrlParameter("sort1desc");
    alert(sortParam);
    $('#selectdropdown option').each(function() {
        var str = $(this).attr('value');
        if(str.indexOf("sort1desc="+sortParam) >= 0) {
            $('#selectdropdown').val($(this).attr('value'));
        }
    });
    $('#selectdropdown').change(function () {
        location.href = $(this).val();
        $("#selectdropdown option:selected").text();
    });
});
function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}
您可以使用

localStorage.getItem()和localStorage.setItem();来保存所选值，然后在就绪函数中重新选择该值。

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage

$(document).ready(function() {
    var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
    if (opt) opt.selected = true;
    $('#selectdropdown').change(function() {
        localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);
        location.href = $(this).val(); //instant redirect
        //$( "#selectdropdown option:selected" ).text(); <-- not possible because js is already about to redirecting
    });
});

工作示例（不带jquery）：

<select id="selectdropdown" onchange="changed(this)">
    <option>nothing</option>
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
</select>
<script>
    var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
    if (opt) {
        opt.selected = true;
    }
    function changed(dd) {
        localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);
        window.location = location.href;
    }
</script>
相关文章：