0

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

如果用户在一个多选中选择（或取消选择）一名员工，我需要更新其他员工以反映相同的选择。如果可能的话，我还需要考虑 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>
4

2 回答 2

0

我最终使用了这个 JavaScript，它接收刚刚更改的 SELECT 的 ID，然后使用该 SELECT 中的值来处理屏幕上的所有其他 SELECT：

 function refreshEmps(currID){

 var sel = document.getElementById(currID);
 var opt = sel.options;
 var checkedVals = new Array();


 // save checked values ***************************

 for (i=0; i<opt.length; i++){

   if (opt[i].selected==true) {
         checkedVals[checkedVals.length]=opt[i].value;
   }

 }

 //update remaining SELECT's ***************************

 var ddCounter = 0; //


 while(document.getElementById("employeeDD_" + ddCounter)!=null) {

 var sel2 = document.getElementById("employeeDD_" + ddCounter);

 if (currID!=sel2.id) {

var opt2 = sel2.options;

for (i=0; i<opt2.length; i++){


     for (j=0; j<checkedVals.length; j++) {

      if(opt2[i].value==checkedVals[j]) {       
        opt2[i].disabled=true;
        opt2[i].style.color = 'red';
          }

    }//end for

 }


  }//end if

  ddCounter++;

 }//end WHILE

 $("select").multiselect('refresh');


 }
于 2013-05-06T19:11:46.180 回答
0

试试这个小提琴

$('#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');
}});

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

于 2013-03-10T20:58:44.747 回答