javascript - 如何使用来自其他 SELECT 的值(在 eric hynds 的多选小部件中)使用 javascript 或 jquery 更新 html SELECT 选项

Question

我正在使用 Eric Hynds 的 jQuery 多选小部件在同一屏幕上的多个不同部分显示员工列表。我在同一个页面上有几个不同的多选，其中一些有相同的员工。

如果用户在一个多选中选择(或取消选择)一名员工，我需要更新其他选择以反射(reflect)相同的选择。如果可能的话，我还有 2 个“optgroups”要考虑，但出于此目的可以忽略这些，除非它相对容易处理。

可以使用 javascript 或 jquery 刷新选项，独立于多选小部件，然后可以调用 .refresh 方法来更新小部件。因此，对此的解决方案可能会也可能不会使用小部件中的代码来更新选项。

以下是两个 SELECT 及其选项的示例。布莱恩琼斯出现在两者中。如果在第一个示例中选择了 Brian Jones，我如何在第二个示例中动态选择他(如果可能，将他移至“已分配员工”组)？如果他未被选中，情况也是如此。

<select id="empSelection_01" name="employee_01" multiple="multiple">
    <optgroup label="Unassigned Employees">
        <option value="42954">Smith, Joe</option>
        <option value="30357">Jones, Brian</option>
    </optgroup>
    <optgroup label="Assigned Employees">
        <option value="42900">Brown, Laura</option>
        <option value="30399">Evans, Jessica</option>
    </optgroup>
</select>
<select id="empSelection_02" name="employee_02" multiple="multiple">
    <optgroup label="Unassigned Employees">
        <option value="42954">Doe, Jane</option>
        <option value="30357">Jones, Brian</option>
    </optgroup>
    <optgroup label="Assigned Employees">
        <option value="42900">Hix, Carolyn</option>
        <option value="30399">Evans, Jessica</option>
    </optgroup>
</select>

Answer 1

像这样尝试 fiddle

$('#empSelection_01').multiselect({click:function(e){
    var isChecked = $(e.currentTarget).attr("checked")=="checked";
    var labelFrom = isChecked ? 'Unassigned Employees' : 'Assigned Employees';
    var labelTo = !isChecked ? 'Unassigned Employees' : 'Assigned Employees';

    var el = $('#empSelection_02').children('[label="' + labelFrom + '"]').children('[value="' + e.currentTarget.value + '"]');
    el.remove();
    $('#empSelection_02').children('[label="' + labelTo + '"]').append(el);
    if (isChecked) {
        el.attr('selected', 'selected');
    } else {
        el.removeAttr('selected');
    }        
    $('#empSelection_02').multiselect('refresh');
}});

这是您如何使用此插件进行操作的示例，但这还不足以解决您的问题。您需要一些逻辑来考虑选项，并指出选项必须位于哪个组中，尤其是在可能存在多对多连接的情况下。