我已按如下方式设置了多选列表:
<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 ,并且所有选定的选项必须以逗号分隔的字符串形式出现。
搜索表单是Wordpress插件的一部分,名为Search&amp;过滤专业版并使用逗号分隔的字符串预先选择选项。主页上的搜索表单使用Select2插件。
我尝试过使用name="_sft_post_tag[]"
,然后将数组插入到逗号分隔的字符串中,如implode(",", $_GET['_sft_post_tag'])
。
这也没有用。目前,它只预先填充_sft_post_tag
答案 0 :(得分: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>
答案 1 :(得分:0)
最终我的回答很简单:
$('#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;
});