HTML 多选值作为 GET 变量中的逗号分隔字符串答案

【问题标题】：HTML Multiple Select value as comma separated string in GET variableHTML 多选值作为 GET 变量中的逗号分隔字符串
【发布时间】：2017-02-02 19:26:29
【问题描述】：

我已经设置了一个多选列表如下：

<select id="cuisine-select" name="_sft_post_tag" multiple="multiple" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
    <option value="banting">Banting</option>
    <option value="pasta">Pasta</option>
    <option value="pizza">Pizza</option>
    <option value="seafood">Seafood</option>
    <option value="vegan">Vegan</option>
    <option value="vegetarian">Vegetarian</option>
</select>

这允许用户选择多种美食进行搜索。

提交表单时，URL 会设置多个同名的 GET 变量，每个变量都有一个选定的值，如下所示：

/restaurant/?_sft_category=saturday&_sft_post_tag=pizza&_sft_post_tag=seafood

我需要它来预先选择结果页面上的标签选项。

我目前卡住的是 URL 的结构。我要求 URL 如下所示：

/restaurant/?_sft_category=saturday&_sft_post_tag=pizza,seafood

换句话说，我需要一个 GET 变量，即 _sft_post_tag 并且所有选定的选项必须出现在逗号分隔的字符串中。

搜索表单是名为 Search & Filter Pro 的 Wordpress 插件的一部分，它使用逗号分隔的字符串来预先选择选项。主页上的搜索表单使用 Select2 插件。

我尝试过使用name="_sft_post_tag[]"，然后将数组内爆成逗号分隔的字符串，例如implode(",", $_GET['_sft_post_tag'])。

这也不起作用。目前它只会预填充_sft_post_tag的最后一个值

【问题讨论】：

您需要停止使用JS 提交表单并通过JS 准备URL，因为您希望URL 应该看起来像......然后使用window.location 重定向作为提交的表单；）
How to get PHP $_GET array?的可能重复
@RST 那你不明白这个问题。

标签： javascript php html wordpress select2

【解决方案1】：

这应该有帮助！

$('form').on('submit', function(e) {
  e.preventDefault()
  var val = $('#cuisine-select').val().join(',')
  var name = $('#cuisine-select').attr('name')
  $.get('/restaurant', {
      _sft_category: 'saturday',
      [name]: val
    })
    .done(function(data) {
      console.log(data)
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="cuisine-select" name="_sft_post_tag" multiple="multiple" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
    <option value="banting">Banting</option>
    <option value="pasta">Pasta</option>
    <option value="pizza">Pizza</option>
    <option value="seafood">Seafood</option>
    <option value="vegan">Vegan</option>
    <option value="vegetarian">Vegetarian</option>
  </select>
  <button type="submit">Submit</button>
</form>

【讨论】：

【解决方案2】：

最终我的回答很简单：

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

        var cuisines = $('#cuisine-select').val().join(',');
        var day = $('#day-select').val();

        window.location = 'restaurant?_sft_category=' + day + "&_sft_post_tag=" + cuisines;
    });

【讨论】：