javascript - HTML Multiple Select value as comma separated string in GET variable - Stack Overflow

admin管理员组

文章数量:1315079

I have set up a multi-select list as follows:

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

This allows the user to select multiple cuisines for their search.

When the form is submitted, the URL sets multiple GET variables of the same name each with one of the selected values, like so:

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

I require this to pre-select tag options on the results page.

Where I am currently stuck is the structure of the URL. I require the URL to look as follows:

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

In other words, I require one GET variable namely _sft_post_tag and all selected options must appear in a ma separated string.

The Search form is part of a Wordpress plugin called Search & Filter Pro and uses ma separated strings to pre-select options. The search form from the homepage uses the Select2 plugin.

I have tried using name="_sft_post_tag[]" and then imploding the array into a ma separated string like so implode(",", $_GET['_sft_post_tag']).

This also didn't work. At the moment it'll only pre-populate the last value of the _sft_post_tag

I have set up a multi-select list as follows:

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

This allows the user to select multiple cuisines for their search.

When the form is submitted, the URL sets multiple GET variables of the same name each with one of the selected values, like so:

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

I require this to pre-select tag options on the results page.

Where I am currently stuck is the structure of the URL. I require the URL to look as follows:

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

In other words, I require one GET variable namely _sft_post_tag and all selected options must appear in a ma separated string.

The Search form is part of a Wordpress plugin called Search & Filter Pro and uses ma separated strings to pre-select options. The search form from the homepage uses the Select2 plugin.

I have tried using name="_sft_post_tag[]" and then imploding the array into a ma separated string like so implode(",", $_GET['_sft_post_tag']).

This also didn't work. At the moment it'll only pre-populate the last value of the _sft_post_tag

• javascript
• php
• html
• wordpress
• jquery-select2

Share Improve this question Follow asked Sep 25, 2016 at 11:02 Marcus ChristiansenMarcus Christiansen 3,20799 gold badges5252 silver badges9393 bronze badges 3

• 1 you need to stop form submission with JS and prepare URL by JS as you want URL should look like.. then use window.location to redirect as the form submittied ;) – Noman Commented Sep 25, 2016 at 11:11
• Possible duplicate of How to get PHP $_GET array? – RST Commented Sep 25, 2016 at 11:21
• @RST Then you do not understand the question. – Marcus Christiansen Commented Sep 25, 2016 at 16:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This should help!

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

Eventually my answer was as simple as:

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

本文标签： javascriptHTML Multiple Select value as comma separated string in GET variableStack Overflow