Question

我试图通过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('&');
  });

})

Answer 1

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

或者，您可以查看历史记录api。

Answer 2

我会做这样的事情。不要忘记制作自己的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>

Answer 3

尝试使用示例代码

  BigQueryClient Client = BigQueryClient.Create("test", _googleCredential)

   string query = @"select * from `projecttest.TestDataset.CostData`";

 result = Client.ExecuteQuery(query, parameters: null, queryOptions: new QueryOptions { UseLegacySql = false });

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

3 个答案: