如何将多个下拉列值作为URL参数传递？

问题描述 投票：0回答：3

我试图用JQuery创建一个使用url参数的实时过滤器，我有点做了但我还有一些问题需要解决。

即使每个选定下拉框的选定值都在URL中传递，下拉列表中的值也会返回零值。

$('#filters select').change(function(){

  var string = $(this).attr('id');
  var value = $(this).val();

  $(this).each(function(){
    window.location.search += string + '=' + value + '&';
  })
});


<div class="col-lg-2" id="filters">

        <div class="form-group mt-3">
          <select class="form-control filter-selection" id="petStatus">
            <option value="" selected>-- Status --</option>
            <option value="2">Found</option>
            <option value="1">Lost</option>
          </select>
        </div>

        <div class="form-group input-group">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-paw"></i></span>
          </div>
          <select class="form-control filter-selection" id="petType">
            <option value="" selected>-- Type --</option>
            <option value="1">Cat</option>
            <option value="2">Dog</option>
            <option value="3">Other</option>
          </select>
        </div>

        <div class="form-group input-group">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-venus-mars"></i></span>
          </div>
          <select class="form-control filter-selection" id="petGender">
            <option value="" selected>-- Gender --</option>
            <option value="1">Male</option>
            <option value="2">Female</option>
          </select>
        </div>

        <div class="form-group input-group">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-calendar"></i></span>
          </div>
          <select class="form-control filter-selection" id="petSize">
            <option value="" selected>-- Size --</option>
            <option value="1">Big</option>
            <option value="2">Mid-size</option>
            <option value="3">Small</option>
          </select>
        </div>
      </div>

我在互联网上搜索了解决方案，但没有人有同样的问题。

有什么想法或建议吗？！

谢谢！

[编辑]我找到了解决方案，这就是我所做的：

$(function(){
  let query = new URL(location).searchParams;
  $("#petStatus").val(query.get("petStatus"));
  $("#petType").val(query.get("petType"));
  $("#petGender").val(query.get("petGender"));
  $('#filters select').change(function(){
      let filters = [];
      $('#filters select').each(function(){
          const string = $(this).attr('id');
          const value = $(this).val();
          if(value != '') {
            filters.push(string + '=' + value);
          }
      });
      window.location.search = filters.join('&');
  });

})
jquery forms codeigniter validation filtering
3个回答
1
投票

如果您更改位置href或搜索，您的网站通常会重新加载。您可以在不触发重新加载的情况下操作location.hash，也可以收集所需的所有参数，设置location.search，并通过再次读取url参数或将内容存储在浏览器中来恢复表单状态。

或者，你可以看看历史api。

0
投票

尝试使用示例代码

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="script.js"></script>
      <script>
         $(document).ready(function(){ 
         $('select').change(function(e){ 
           var parameters = "";
           $('select').each(function(){
             parameters += ($(this).attr('id')+"="+this.value+"&"); 
           });
           window.location.search +=parameters;
         });
         });
      </script>
   </head>
   <body>
      <h1>Hello Plunker!</h1>
      <select id="Select1">
         <option value="1">Sri</option>
         <option value="2">Kumar</option>
         <option value="3">Dhana</option>
         <option value="4">Kishore</option>
      </select>
      <select id="Select2">
         <option value="1">Demo</option>
         <option value="2">Values</option>
         <option value="3">Soft</option>
      </select>
   </body>
</html>
0
投票

我会做这样的事情。不要忘记制作自己的filterContent功能，不要忘记将URL加载到不同的select

function filterContent() {
  document.querySelector('#filtered-content').innerHTML = 'Applied filters' + window.location.search;
}
$(document).ready(() => {
  // TODO load values from URL into select
  $('#filters select').change(function() {
    let filters = [];
    $('#filters select').each(function() {
      const string = $(this).attr('id');
      const value = $(this).val();
      if (value !== '') filters.push(string + '=' + value);
    })
    window.history.pushState({
      page: 'filtered'
    }, 'Filtered', '?' + filters.join('&'));
    filterContent();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2" id="filters">

  <div class="form-group mt-3">
    <select class="form-control filter-selection" id="petStatus">
      <option value="" selected>-- Status --</option>
      <option value="2">Found</option>
      <option value="1">Lost</option>
    </select>
  </div>

  <div class="form-group input-group">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-paw"></i></span>
    </div>
    <select class="form-control filter-selection" id="petType">
      <option value="" selected>-- Type --</option>
      <option value="1">Cat</option>
      <option value="2">Dog</option>
      <option value="3">Other</option>
    </select>
  </div>

  <div class="form-group input-group">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-venus-mars"></i></span>
    </div>
    <select class="form-control filter-selection" id="petGender">
      <option value="" selected>-- Gender --</option>
      <option value="1">Male</option>
      <option value="2">Female</option>
    </select>
  </div>

  <div class="form-group input-group">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-calendar"></i></span>
    </div>
    <select class="form-control filter-selection" id="petSize">
      <option value="" selected>-- Size --</option>
      <option value="1">Big</option>
      <option value="2">Mid-size</option>
      <option value="3">Small</option>
    </select>
  </div>
</div>

<div id="filtered-content"></div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.