仅当从下拉列表中选择选项时才附加到 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

实现这一点的最简单和最可扩展的方法是在所有过滤器值控件上放置一个通用类。然后，您可以使用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>

这似乎是基于表单字段输入框，而不是下拉/选择选项框。试图让它与不需要按钮来提交更改的下拉菜单一起使用

在这种情况下，挂钩到所有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>

Answer 2

发布此答案只是为了展示如何将更大的问题分解为更小更易读的代码块。

//function jobsubmit() {
//    $('#frame1').attr('src', buildUrl())  
//}

function buildUrl() {
   return 'https://myurl.com/?filters=' + buildFilters()
}

function buildFilters() {
    return ['sector', 'worktype', 'location', 'keywords']
       .map(maybeFilter)
       .filter(v => v !== '') // remove empty strings
       .join(',')
}

function maybeFilter(selectorId) {
    const value = getSelectorValueById(selectorId)

    if(!hasValue(value)) {
      return ''
    }

    return `${selectorId}|${value}`
}

function getSelectorValueById(selectorId) {
    return $(`#${selectorId}`).val()
}

function hasValue(value) {
    return value !== null && value !== undefined && value.trim() !== ''
}

function runExample() {
    console.log(buildUrl())
}

$('.filter').on('change', runExample)

runExample()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sector" class="filter">
    <option value="">Please Select</option>
    <option selected 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 selected 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 selected 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>

Answer 3

检查元素是否有值

function getFilter (elemname ) {
  var _val = $('#sector').val().trim();
  return _val != "" ? elemname + "|" + _val + "," : "";
}
function jobsubmit() {
    var _url = 'https://myurl.com/&filters=' + 
    getFilter('sector') +
    getFilter('worktype') +
    getFilter('location') +
    getFilter('keywords');
    // Remove the last comma if you want.
    $('#frame1').attr('src', _url.replace(/,\s*$/, ""))
}