我正在使用此页面
http://loudev.com/中的jquery multiselct.它运行良好但现在系统要求需要此多选项以按选择的顺序过去数据.
在显示器上没有问题,因为数据是根据所做的选择排列的,但是当提交表格时,所选数据的顺序与选择框的顺序相同.
这是基于上图的工作原理: –
我从下拉框中选择了巴西,法国和澳大利亚,它按照选择的顺序排列.我发送此表后,我将收到的数据应该是巴西,法国和澳大利亚作为显示的订单,但收到的数据是法国,澳大利亚和巴西的选择框的顺序相同.
这是插件生成的HTML代码,这仅用于显示,在提交时,它将超过已隐藏的原始选项值.如果用户点击,它只将“选中”设置为原始选项中的选择….
- <div id="ms-public-methods" class="ms-container">
- <div class="ms-selectable">
- <ul class="ms-list">
- <li class="ms-elem-selectable ms-selected" ms-value="fr" style="display: none; ">France</li>
- <li class="ms-elem-selectable" ms-value="uk">United Kingdom</li>
- <li class="ms-elem-selectable" ms-value="us">United States</li>
- <li class="ms-elem-selectable" ms-value="ch">China</li>
- <li class="ms-elem-selectable ms-selected" ms-value="au" style="display: none; ">Australia</li>
- <li class="ms-elem-selectable" ms-value="in">India</li>
- <li class="ms-elem-selectable" ms-value="ar">Argentina</li>
- <li class="ms-elem-selectable ms-selected" ms-value="br" style="display: none; ">Brazil</li>
- <li class="ms-elem-selectable" ms-value="tb">Tibet</li>
- <li class="ms-elem-selectable" ms-value="co">Columbia</li>
- <li class="ms-elem-selectable" ms-value="cr">Croatia</li>
- <li class="ms-elem-selectable" ms-value="it">Italia</li>
- <li class="ms-elem-selectable" ms-value="es">Espana</li>
- <li class="ms-elem-selectable" ms-value="id">Indonesia</li>
- <li class="ms-elem-selectable" ms-value="du">Germany</li>
- <li class="ms-elem-selectable" ms-value="no">Norway</li>
- </ul>
- </div>
- <div class="ms-selection">
- <ul class="ms-list">
- <li class="ms-elem-selected" ms-value="br">Brazil</li>
- <li class="ms-elem-selected" ms-value="fr">France</li>
- <li class="ms-elem-selected" ms-value="au">Australia</li>
- </ul>
- </div>
- </div>
非常感激你的帮助.
这是我到目前为止所得到的.我使用了插件的回调函数,并将值存储到隐藏字段中并将其转换为数组.当取消选择该值时,它也将被移除到隐藏的输入字段中.我试过这个,它工作了!
- //sample form
- <form method="post">
- <select multiple="multiple" id="countries" name="countries[]">
- <option value="fr">France</option>
- <option value="uk">United Kingdom</option>
- <option value="us">United States</option>
- <option value="ch">China</option>
- </select>
- <input type="hidden" name="multiple_value" id="multiple_value" />
- <input type="submit" name="submit" value="Submit" />
- </form>
- //the jquery script with callback that sets the value into the hidden field
- <script>
- $(function(){
- $('#countries').multiSelect({
- afterSelect: function(value,text){
- var get_val = $("#multiple_value").val();
- var hidden_val = (get_val != "") ? get_val+"," : get_val;
- $("#multiple_value").val(hidden_val+""+value);
- },afterDeselect: function(value,text){
- var get_val = $("#multiple_value").val();
- var new_val = get_val.replace(value,"");
- $("#multiple_value").val(new_val);
- }
- });
- });
- </script>
- //the PHP workaround
- <?PHP
- if(isset($_POST['submit'])){
- $hidden = $_POST['multiple_value']; //get the values from the hidden field
- $hidden_in_array = explode(",",$hidden); //convert the values into array
- $filter_array = array_filter($hidden_in_array); //remove empty index
- $reset_keys = array_values($filter_array); //reset the array key
- var_dump($reset_keys); //the result
- }
- ?>