HTML複数選択値

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 

が、私は結果でこのように事前にselectタグのオプションが必要ですページ。

私が現在立ち往生している場所は、URLの構造です。私はすなわち_sft_post_tagと、選択したすべてのオプションはコンマで区切られた文字列で表示されなければなりません GET変数を必要とする、つまり

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

を：私は次のように見えるようにURLが必要です。

検索フォームは、Search & Filter Proと呼ばれるWordpressプラグインの一部であり、コンマ区切り文字列を使用してオプションを事前に選択します。ホームページからの検索フォームは、Select2プラグインを使用します。

私はname="_sft_post_tag[]"を使用してみましたが、次にimplode(",", $_GET['_sft_post_tag'])のようにコンマで区切られた文字列に配列を埋め込みました。

これも機能しませんでした。現時点では、最後の値が事前に設定されます。_sft_post_tag

Answer 1

結局私の答えは、のように簡単だった：

$('#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; 
    }); 

Answer 2

これが役立ちます。

$('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>