通过表单提交获取选择列表的所有选定值 - Jquery Chosen

Question

我正在使用jQuery Chosen插件。

我的页面上有一个多选列表。

<select name="articles_on_this_menu" multiple="multiple" data-placeholder="Choose Articles" id="articles_on_this_menu">
    <option value="27" selected="selected">Join Team</option>
    <option value="11">Faislabad</option>
    <option value="12">Peshawar</option>
    <option value="28" selected="selected">Track your Order</option>
    <option value="34" selected="selected">AboutUS2</option>
</select>

我希望通过表单提交POST的方式来保存这些已选值。

但是，当提交后，我只能获取列表中最后一个选定值。

我知道可以通过JQuery获取所有已选值：

var articles_on_this_menu= $("#articles_on_this_menu").val()

但我想在表单提交中获取......如果我使用articles_on_this_menu[]，那么我就无法以Chosen插件的方式获取多选列表

编辑： 有人发布了JS或Jquery解决方案的答案，但我已经说过，请不要使用任何JS或JQuery。我想在表单提交时将所有选定的值获取到一个数组中。

- user4275254

Answer 1

在PHP中，使用html中的articles_on_this_menu[]是可以正常工作的。

如果您在后端使用Python，请使用以下方法（无需更改HTML）： 对于Django，请使用request.POST.getlist('articles_on_this_menu')， 对于Flask框架，请使用request.form.getlist('articles_on_this_menu')。

- Abhiram Pappula

Answer 2

编辑后的HTML代码：

 <select name="articles_on_this_menu[]" multiple="multiple" data-placeholder="Choose Articles" id="articles_on_this_menu">
        <option value="27" selected="selected">Join Team</option>
        <option value="11">Faislabad</option>
        <option value="12">Peshawar</option>
        <option value="28" selected="selected">Track your Order</option>
        <option value="34" selected="selected">AboutUS2</option>
    </select>

使用多选项的名称作为数组名称 name="articles_on_this_menu[]" 然后在提交表单时，您将获得所选选项的数组。

PHP 代码：

//Array of selected articles

$selectArticles = isset($_POST['articles_on_this_menu']) 
    ? $_POST['articles_on_this_menu'] 
    : array();

- SubaRajasekaran

---

为什么这不是被接受的答案？它完全以HTML方式回答了问题，就像要求的那样。 - Ventus

Answer 3

我希望这就是你要找的，我刚刚完成了同样的任务，但出于不同的原因。

 var data = {'cat_ids[]' : []};
        $('select').find('option:selected').each(function(){                    
                data['cat_ids[]'].push($(this).val());                  

        }); 

var posting = $.post("you url here",data);
        posting.done(function( data ){
            $('ID/Class').empty().append(data);

            }); 

在你的 PHP 文件中，你可以获取内容

 print_r($_POST['cat_ids']);

- imran qasim

---

您正在使用jQuery进行发布...而我只需要通过表单提交进行发布。 - user4275254

只需将选择标签的名称从“articles_on_this_menu”更改为“articles_on_this_menu []”，然后在提交后就会获得一个数组。 - imran qasim

通过执行 articles_on_this_menu[]，我会得到一个简单的 HTML 渲染的下拉菜单……而不像 CHOSEN 插件那样。 - user4275254

Answer 4

使用以下代码 - 使用 :selected - selector

var selectedValueArray= []; 
$('#articles_on_this_menu :selected').each(function(i, selected){ 
  selectedValueArray[i] = $(selected).text(); 
});

- prog1011

Answer 5

Abhiram Pappula的回答几乎完美，但是我必须包括开放和关闭括号才能在Flask中实际获得列表结果：

所以不是

request.form.getlist('articles_on_this_menu')

使用：

request.form.getlist('articles_on_this_menu[]')

- Matyas Greff