重定向后在下拉菜单中更改所选项目

Question

我正在处理广告页面。 我制作了一个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>

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

我不知道该如何解决。 我是html编程的初学者，所以我什至不知道这是否是用于此类网站的正确方法。 建议我使用select2 ，但是我不知道该如何使用。

谢谢你的帮助！

Answer 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>