jQuery 和多选

Question

在我的页面上，我必须选择 $.post 函数加载的选项值。我有一个按钮可以将数据从一个选择“移动”到另一选择。该示例适用于新页面，但不适用于我的页面。单击后，选定的元素不会移动到其他选择。

问题是还有另一种方法可以做到这一点，或者我如何纠正我的页面以使其正常工作？

示例代码：

<div style="float:left; border:1px solid red;">
    <div style="background-color:red; color:white;" align="center">INFORMATIVE</div>
    <div id="prop_info" style="float:left;">
        <div style="border:1px solid red;">PROPOSTI</div>
        <div style="float:left"><select multiple id="sel_info_pro" name="sel_info_pro" class="sel"><option value="b">a</option><option>b</option></select></div>
        <div style="float:left;"><a href="#" id="add_info"> >> </a><br><a href="#" id="remove_info"> << </a></div>
    </div>  
    <div id="conf_info" style="float:left;">
        <div style="border:1px solid red;">CONFIGURATI</div>
        <select multiple id="sel_info_conf" name="sel_info_conf" class="sel"></select>
    </div>
</div>

$(document).ready(function(){
    $('#add_info').click(function() {
        return !$('#sel_info_pro option:selected').remove().appendTo('#sel_info_conf');
    });
    $('#remove_info').click(function() {
        return !$('#sel_info_conf option:selected').remove().appendTo('#sel_info_pro');
    });
});

Answer 1

一点指导可能会有所帮助。如果您执行以下操作：

alert($('#sel_info_pro option:selected').length);

那么无论您选择了多少个，您都会得到 0 所选

选项实际上是针对 jQuery 对象上的 val() 存储的：

alert($('#sel_info_pro option').val().length); //gives you the count of options selected
alert($('#sel_info_pro option').val()[0]); //gives you the value of the first option selected

因此，上述方法将不起作用。您可能必须遍历数组，将它们与列表中的每个项目进行比较才能将它们移动。

此链接也可能有帮助： http://marcgrabanski.com/articles/jquery-select-列表值

Answer 2

我找到了我的工作解决方案：

$(document).ready(function(){
$('#add_info').click(function() {
    var foop = []; 
    $('#sel_info_pro option:selected').each(function(z, selected){ 
        foop[z] = $(selected).val(); 
        return !$('#sel_info_pro option:selected').val(foop[z]).remove().appendTo('#sel_info_conf'); 
    });
}); 
$('#remove_info').click(function() { 
    var foo = []; 
    $('#sel_info_conf option:selected').each(function(i, selected){ 
        foo[i] = $(selected).val(); 
        return !$('#sel_info_conf option:selected').val(foo[i]).remove().appendTo('#sel_info_pro'); 
    });
});

});

谢谢大家的帮助！