当用户在选择框中选择选项时，使用window.location.href重定向用户只会更改导航器中URL的最后一位

Using window.location.href to redirect user when he selects option in select box only changes last bit of the url in navigator

本文关键字：选择 用户 导航 URL 最后一位 重定向 location 选项 window 使用 href      更新时间：2023-09-26

在我所有的rails应用程序页面中，我都有一个根据情况而变化的选择框：

<% if session[:user_status]%>
    <% if params[:office_id] %>
      <%= select_tag "dash_select", options_for_select([["<i class='fa fa-lock select_icon' aria-hidden='true'></i>"+session[:user_status], session[:user_status]], ["all offices", "all"]]), class: "form-control custom-office-select wide main-select-bar" %>
    <% elsif params[:account_asso_id] %>
      <%= select_tag "dash_select", options_for_select([["<i class='fa fa-lock select_icon' aria-hidden='true'></i>"+session[:user_status], session[:user_status]], ["<i class='fa fa-globe' aria-hidden='true'></i>
all offices", "all"]], "all"), class: "form-control custom-office-select wide"  %>
    <% else %>
      <%= select_tag "dash_select", options_for_select([["<i class='fa fa-lock select_icon' aria-hidden='true'></i>"+session[:user_status], session[:user_status]], ["<i class='fa fa-globe select_icon' aria-hidden='true'></i>all offices", "all"]], session[:user_status]), class: "form-control custom-office-select wide"  %>
    <% end -%>
  <% elsif session[:user_status] %>
    <%= select_tag "dash_select", options_for_select([session[:user_status], session[:user_status]]), class: "form-control" %>
  <% else %>
  <% end -%>

我写了一些在选择框的选项时触发的JS：我根据选择的选项将用户重定向到不同的页面。

   $(document).ready(function() {
      $('select').niceSelect();
      $("#dash_select").change(function(){
        if ($(this).val() == "all") {
              window.location.href = "association/account_assos/"+<%=session[:account_asso_id]%>+"/offices"
            }
        else if ($(this).val() == "admin"){
              window.location.href = "association/account_assos/"+<%=session[:account_asso_id]%>
        }
        else if ($(this).val() == "employee"){
          window.location.href = "/users/"+ <%=session[:user_id] %>
        }
        else {
              var office_id = $(this).val();
              window.location.href = "association/office/"+office_id;
        }
      });
    });

当我在选择框中更改所选选项时，导航器中的 url 确实发生了变化，但不是更改整个 url 并简单地构建在"http://localhost:3000/"之上，例如，它正在抑制当前 url 的最后一位/位并在其上构建新 url。

例如，如果我当前所在的页面的网址是："http://localhost:3000/association/account_assos/6/users"假设我将我的选择更改为"admin"，它将摆脱当前 url 的"/users"部分并在其上构建。这给了我：http://localhost:3000/association/account_assos/6/association/account_assos/<%=会话[：account_asso_id]%>

如何更改整个网址，而不仅仅是最后一点？

这是因为

您使用的是相对路径。将提供的 URL 字符串更改为绝对字符串，或在其前面加上/以使其相对于基文件夹。

另请注意，switch语句也可能更适合您使用的模式。试试这个：

$("#dash_select").change(function() {
    var url;
    switch ($(this).val()) {
        case: 'all':
            url = "/association/account_assos/<%= session[:account_asso_id] %>"; 
            break;
        case: 'admin':
            url = "/association/account_assos/<%= session[:account_asso_id] %>";
            break;
        case: 'employee':
            url = "/users/<%= session[:user_id] %>";
            break;
        default:
            url = "/association/office/" + $(this).val();                
    }
    window.location.assign(url);
});
相关文章：