重定向时更改下拉菜单中的选定项目答案

【问题标题】：Changing selected item in dropdown menu when redirected重定向时更改下拉菜单中的选定项目
【发布时间】：2018-09-19 06:01:17
【问题描述】：

我正在处理带有广告的页面。我已经制作了一个 tpl 页面，我只想在用户选择他想要的内容时更改页面上广告的顺序和数量。

<select id="order" class="form-control" onchange="javascript:location.href = this.value;">
        <option selected value="http://localhost:8080/newer_older/{{num}}/1">Newer to oldernar</option>
        <option value="http://localhost:8080/older_newer/{{num}}/1">Older to newer</option>
</select>

<select id="num" class="form-control" onchange="javascript:location.href = this.value;">
        <option selected value="http://localhost:8080/{{order}}/5/1">5</option>
        <option value="http://localhost:8080/{{order}}/10/1">10</option>
        <option value="http://localhost:8080/{{order}}/all/1">All</option>
</select>

<script type="text/javascript">
    window.onload = function(){
        location.href=document.getElementById("selectbox").value;
    }       
</script>

到目前为止，我找到了这个解决方案：我有两个带有选定项目的下拉菜单，当重定向到带有广告的该站点时，它们将“主要”被选择。然后我找到了一个代码，它将用户重定向到具有所选顺序和广告数量的页面，但下拉菜单有问题。我希望它将选定的值更改为用户选择的值（因此，如果用户选择从旧到新的顺序，站点将重定向到他想要的值，但在下拉菜单中，选择的仍然是主要选择，在我的情况下是新到旧的订单）。我希望它像在this site 上一样工作，您可以在右上角进行排序。

我不知道如何解决这个问题。我是 html 编程的初学者，所以我什至不知道这是否是这种网站的正确方法。我被建议使用select2，但我不知道如何使用它。

感谢您的帮助！

【问题讨论】：

所以如果我做对了，用户就会访问你的页面。然后用户立即被重定向到预选的组合框值。如果用户更改了“新旧组合框”，则必须在下次用户访问您的页面时选择该值？
没有。每次用户打开页面时，我都想要预选的组合。然后，如果用户决定不同的顺序并在下拉框中选择它，那么他会被重定向到同一页面，只是广告的顺序不同（以及 html 地址）。
所以这是在一个角度应用程序中？你能展示更多的 JavaScript 代码吗？例如{{num}} 和{{order}} 在哪里设置？

标签： javascript html drop-down-menu

【解决方案1】：

你可以试试这个……虽然不是很干净。

<select id="order" class="form-control" onchange="onOrderChange();">
        <option id="newer_older" value="newer_older">
          Newer to older
          </option>
        <option id="older_newer" value="older_newer">
          Older to newer
        </option>
</select>

<select id="num" class="form-control" onchange="onNumChange();">
        <option id="5" value="5">5</option>
        <option id="10" value="10">10</option>
        <option id="all" value="all">All</option>
</select>

<script>
    function onOrderChange() {
        var orderSort = document.getElementById("order").value;
      var num = document.getElementById("num").value;

      if(orderSort == "new_older") {
        var url = "http://localhost:8080/newer_older/" + num + "/1?orderSort=new_older&num=" + num;
        location.href = url;

      } else if(orderSort == "older_newer") {
        var url = "http://localhost:8080/older_newer/" + num + "/1?orderSort=older_newer&num=" + num;
        location.href = url;
      }
    }

    function onNumChange() {
      var orderSort = document.getElementById("order").value;
      var num = document.getElementById("num").value;

      if(num == "5") {
        var url = "http://localhost:8080/" + orderSort + "/5/1?num=5&orderSort=" + orderSort;
        location.href = url;
      } else if (num == "10"){
        var url = "http://localhost:8080/" + orderSort + "/10/1?num=10&orderSort=" + orderSort;
        location.href = url;
      } else if (num == "all"){
        var url = "http://localhost:8080/" + orderSort + "/all/1?num=all&orderSort=" + orderSort;
        location.href = url;
      }
    }

    window.onload = function() {
      var url = new URL(window.location.href);

      var selectedOrder = url.searchParams.get("orderSort");
      var selectedNum = url.searchParams.get("num");

      if(selectedOrder != null) {
        document.getElementById(selectedOrder).selected=true;
      }

      if(selectedNum != null){
        document.getElementById(selectedNum).selected=true;
      }
    };
</script>

【讨论】：