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

时间:2018-09-17 21:20:47

标签: javascript html drop-down-menu

我正在处理广告页面。我制作了一个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,但我不知道该如何使用。

谢谢您的帮助!

1 个答案:

答案 0 :(得分:0)

您可以尝试此操作。虽然不是一种很干净的方法。

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