jquery - 仅当从下拉列表中选择选项时才附加到 iframe src

Question

我试图根据从 4 个表单输入字段中选择的选项构建一个 URL，其中 2 个是选择框，2 个是用于输入搜索查询的文本输入框。我正在使用以下功能。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
function jobsubmit() {
    $('#frame1').attr('src','https://myurl.com/&filters=' + 
    'sector|' + $('#sector').val() + ',' +
    'worktype|' + $('#worktype').val() + ',' +
    'location|' + $('#location').val() + ',' +
    'keywords|' +  $('#keywords').val());   
}
</script>

我的问题是我不知道如何更新上述代码，以便仅当从下拉列表中选择了上述 4 个过滤器(部门、工作类型、位置、关键字)的选项时才会添加它们。

现在，我得到以下信息(假设选择了工作类型):

https://myurl.com&filters=sector|,worktype|Contract,location|,keywords|

我真正需要的是这个:

https://myurl.com&filters=worktype|Contract,

然后，如果在第一个选项之后选择了另一个选项，则 URL 应像这样构建自身:

https://myurl.com&filters=sector|Marketing,worktype|Contract,

等等。我缺少什么？谢谢!

Answer 1

实现此目的的最简单且最可扩展的方法是在所有过滤器值控件上放置一个公共(public)类。然后，您可以使用 map() 创建一个仅包含输入值的数组，并使用过滤器字符串中控件的 id (如示例中所示)。最后，您可以 join() 该数组重新组合在一起，并将其与 URL 字符串连接起来，以设置为 iframe 的 src。试试这个:

$('form').on('submit', function(e) {
  e.preventDefault();

  var filters = $('.filter').map(function() {
    return this.value.trim() ? this.id + '|' + this.value.trim() : null;
  }).get();
  var url = 'https://myurl.com/&filters=' + filters.join(',');

  console.log(url);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <input type="text" value="foo" id="sector" class="filter" />
  <input type="text" value="" id="worktype" class="filter" />
  <input type="text" value="" id="location" class="filter" />
  <input type="text" value="bar" id="keywords" class="filter" />
  <button>Submit</button>
</form>

This seems to be based on form field input boxes and not drop-down/select option boxes. Trying to get this to work with drop-downs that don't require a button to submit the change

在这种情况下， Hook 到所有 select 元素上的 change 事件，而不是 form 的 submit 事件>:

$('.filter').on('change', function() {
  var filters = $('.filter').map(function() {
    return this.value.trim() ? this.id + '|' + this.value.trim() : null;
  }).get();
  var url = 'https://myurl.com/&filters=' + filters.join(',');

  console.log(url);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <select id="sector" class="filter">
    <option value="">Please Select</option>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="fizz">Fizz</option>
    <option value="buzz">Buzz</option>
  </select>
  <select id="worktype" class="filter">
    <option value="">Please Select</option>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="fizz">Fizz</option>
    <option value="buzz">Buzz</option>
  </select>
  <select id="location" class="filter">
    <option value="">Please Select</option>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="fizz">Fizz</option>
    <option value="buzz">Buzz</option>
  </select>
  <select id="keywords" class="filter">
    <option value="">Please Select</option>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="fizz">Fizz</option>
    <option value="buzz">Buzz</option>
  </select>
</form>