HTML 多選值作為 GET 變量中的逗號分隔字符串

Question

我已經設置了一個多選列表如下：

<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'])為逗號分隔的字符串，如implode(",", $_GET['_sft_post_tag']) 。

這也沒有奏效。 目前它只會預填充_sft_post_tag的最后一個值

Answer 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>

Answer 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;
    });