Question

我有以下两个选择（多个列表），我正在尝试设置为一个班车，我在那里向用户提供他们可以选择的“可用列表”，然后将其传送到右侧选择列表，这是我的“已分配列表”。

HTML代码如下：

<select multiple="multiple" name="avail_list" size="7" style="width:250px;" id="AVAILABLE_LIST">
    <option value="A">A1</option>
    <option value="B">B1</option>
    <option value="C">C1</option>
    <option value="D">D1</option>
    <option value="E">E1</option>
    <option value="F">F1</option>
</select>

<select multiple="multiple" name="assign_list" size="7" style="width:250px;" id="ASSIGNED_LIST">
    <option value="D">D1</option>
    <option value="E">E1</option>
    <option value="F">F1</option>
</select>

通过使用jQuery，我怎么可能从AVAILABLE_LIST中删除已经选择并且现在在ASSIGNED_LIST中的选项？

我需要一些如何仅对选项值执行（AVAILABLE_LIST减去ASSIGNED_LIST）。

基于以上所述，AVAILABLE_LIST将如下所示：

<select multiple="multiple" name="avail_list" size="7" style="width:250px;" id="AVAILABLE_LIST">
    <option value="A">A1</option>
    <option value="B">B1</option>
    <option value="C">C1</option>
</select>

**注意：为了使自己清楚，我在进入我的页面时已经有了上述数据设置，也就是说，右侧的“已分配列表”中已有值。

在向用户呈现此页面时带有两个选择列表时，我想以编程方式在后台执行两组之间的减号。由于已经进行了选择，因此无需人工干预。

只是想知道这是否可行？

感谢。

Answer 1

编辑 - 是的，你可以，看看这个小提琴：http://jsfiddle.net/57JUD/5/

试试这段代码：

$('#ASSIGNED_LIST > option').each(function(index, element){
    var val= $(element).val();
     $('#AVAILABLE_LIST > option[value="'+val+'"]').remove();
});

Answer 2

这样的东西？

小提琴：http://jsfiddle.net/5yt5a/

<强> HTML：

<select id="avail_list" multiple="multiple" name="avail_list" size="7" style="width:250px;" id="AVAILABLE_LIST">
    <option value="A">A1</option>
    <option value="B">B1</option>
    <option value="C">C1</option>
    <option value="D">D1</option>
    <option value="E">E1</option>
    <option value="F">F1</option>
</select>

<select id="assign_list" multiple="multiple" name="assign_list" size="7" style="width:250px;" id="ASSIGNED_LIST">
    <!--
    <option value="D">D1</option>
    <option value="E">E1</option>
    <option value="F">F1</option>
    //-->
</select>

<br />
<button>MOVE >></button>

<强> jquery的：

$("button").click(function() {

    $("#avail_list option:selected").appendTo("#assign_list");

});

操作在页面加载上选择多列表设置

2 个答案: