0

Eric Hynds の jQuery multiselect ウィジェットを使用して、同じ画面のいくつかの異なるセクションに従業員のリストを表示しています。同じページにいくつかの異なる複数選択があり、そのうちのいくつかは同じ従業員を持っています。

ユーザーが 1 つの複数選択で従業員を選択 (または選択解除) した場合、同じ選択を反映するように他の従業員を更新する必要があります。可能であれば、考慮すべき 2 つの「optgroup」もありますが、扱いが比較的簡単でない限り、この目的では無視できます。

複数選択ウィジェットとは無関係に、javascript または jquery を使用してオプションを更新し、.refresh メソッドを呼び出してウィジェットを更新することができます。したがって、これに対する解決策は、オプションの更新を行うためにウィジェットのコードを使用する場合と使用しない場合があります。

2 つの SELECT とそのオプションの例を次に示します。どちらにもブライアン・ジョーンズが出演。最初の例で Brian Jones が選択された場合、2 番目の例で彼を動的に選択するにはどうすればよいですか (また、可能であれば、彼を「Assigned Employees」グループに移動します)。選ばれなかった場合も同様です。

<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

このフィドルのようにしてみてください

$('#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 に答える
0

最終的に、変更されたばかりの SELECT の ID を受け取り、その SELECT 内の値を使用して、画面上の他のすべての SELECT を処理するこの JavaScript を使用することになりました。

 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 に答える