我正在使用此页面
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
}
?>