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

Posted 2023-05-09

【中文标题】仅当从下拉列表中选择选项时才附加到 iframe src

【英文标题】：Append to iframe src only when options are selected from drop-down

【发布时间】：2019-12-13 01:28:50

【问题描述】：

我正在尝试根据从 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,

等等。我错过了什么？ 谢谢！

【参考方案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>

【讨论】：

谢谢。但是，这似乎基于表单字段输入框，而不是下拉/选择选项框。试图让它与不需要按钮来提交更改的下拉菜单一起工作。只要有人从 2 个“部门”或“工作类型”下拉菜单中选择一个选项，URL 就会立即更新。

抱歉，尝试使用您提供的代码按原样创建一个新页面，然后得到这个：Uncaught ReferenceError: $ is not defined。参考$('.filter') 部分。当我将 jQuery 包含在函数之前时，错误消失了，但似乎没有任何效果（尽管在 *** 上运行代码 sn-p 似乎很完美！）只是试图让它在本地工作。

你需要在这个逻辑之前包含jquery.js。如果这导致其他事情停止工作，那么你在某处有错误。检查控制台。

嗯，是的，正如我所说，在脚本删除错误之前移动 jQuery.min 包含，但是当我选择选项时没有任何反应，并且控制台没有输出:(

不幸的是，这听起来像是您逻辑中其他地方的问题，因为您可以看到，与上面的 sn-p 隔离，这可以正常工作。如果您正在努力调试问题，我建议您使用所有相关代码开始一个新问题。

【参考方案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>

【参考方案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*$/, ""))

【讨论】：

谢谢。似乎是上面的语法错误：return _val != "" ? elemname + "|" + _val + ","; (Uncaught SyntaxError: Unexpected token ;)。另外 getFilter 函数如何获取其他 3 个字段/下拉菜单输入的值？