JQuery/Javascript：从多个选择构建 URL 字符串

Question

我有以下 selects:

<select name="wpf2750_20">
  <option value="200">AAA</option>
  <option value="400">BBB</option>
</select>
<select name="wpf2750_27">
  <option value="600">CCC</option>
  <option value="800">DDD</option>
</select>

然后是下面的脚本：

<script>
  jQuery('select').on('change', function() {
    var url = 'http://example.com/file.html' + '?' + this.name + '=' + this.value;
    alert(url);
  });
</script>

这给了我正确的 URL 以及 select 的名称和值。由于有多个 select，我如何用完整的字符串构建一个 URL？

目前它给了我： http://example.com/file.html?wpf2750_20=AAA

我想给我的是： http://example.com/file.html?wpf2750_20=AAA?wpf2750_27=CCC

因此，每个 select 都建立在 URL 的基础上。如果他们更改选项，则 URL 也需要更改以反映这一点。

Answer 1

将所有名称和值收集到一个对象中。通过索引到该对象来构造您的字符串。

const $selects = $('select');
$selects.on('change', event => {
  const fragments = Object.fromEntries(
    $selects.map((i,e) => ([e.name, e.value])).get()
  );
  const url = `http://example.com/file.html?${fragments['wpf2750_20']}=${fragments['wpf2750_27']}`;
  console.log(url);
});

或者，更一般地说，从 select 构建一个查询字符串，然后将其附加到 url 前缀：

const $selects = $('select');
$selects.on('change', event => {
  const query = $selects.map((i,e) => `${e.name}=${e.value}`).get().join('&');
  const url = `http://example.com/file.html?${query}`;
  console.log(url);
});

参考文献：

Answer 2

这是因为您的事件仅在您更改输入时触发，而您的代码仅捕获触发事件的元素。

如果你想捕获每个 select 元素，那么当 select 时你需要 select 每个 select 元素而不是使用 this输入已更改。

你可以试试这个

<script>
  $('select').on('change', function () {
      let params = [] 
      $('select').each((i,e)=>{
          params.push(`${$(e).prop("name")}=${$(e).val()}`)
      })
      var url = 'http://example.com/file.html' + '?' + params.join("&"); //suppose params on url join with & symbol but you are joining with ?

      alert(url);
  });
</script>

将 $ 替换为您的 jQuery

JQuery/Javascript：从多个选择构建 URL 字符串

JQuery/Javascript: Build URL string from multiple selects

javascript

jquery