Question

我有三个列表（存储桶）如下：

＆＃39;团队列表＆＃39; （teamA，teamB，teamC）
＆＃39;会员名单＆＃39; （member1，member2 ......等）
＆＃39;选定会员＆＃39;即一个空列表，将由上述两个列表中的项目填充

以下两个按钮：

＆＃39;直接选择会员＆＃39; - ＆GT;该按钮将一个/多个被选中的成员从成员列表移动到R.H.S上的空桶。我实现了这个，这是有效的。
＆＃39;按团队选择会员＆＃39; - ＆GT;如果在团队的桶中选择了一个/多个团队，则此按钮将关联的团队成员从成员的桶中移动到空桶。我已经实现了一半而且卡住了。所以需要帮助来完成这个。

规则：每个团队都有一些与之相关的成员。一个团队的成员可能是另一个团队的成员。

一旦会员从会员的桶中移动到空桶（通过＆＃39;直接选择会员＆＃39;或按＆＃39;按团队选择会员＆＃39;），该成员将从成员存储桶中删除。
如果选择了一个/多个团队，并按照团队选择成员＆＃39;如果被按下，团队将留在团队的桶中，只有关联的成员才会从会员的桶中删除。
由于两个或多个团队可能会有重叠成员，因此如果某个成员已经从会员的桶中移动到RHS上的空桶，那么选择一个团队只会移动该成员留在会员的桶里。
不会从团队的队列中删除团队，只会删除相关成员。

我正在提供我到目前为止所写的代码，请帮助我按照团队选择成员＆＃39;按照我上面的解释按钮功能。我使用JSON对象来定义团队和成员关系，它总是这样。请帮助。感谢。

＆＃13;

function appendapp(to, from) {
  var select1 = document.getElementById(to);
  var select2 = document.getElementById(from);
  var selectedArray = new Array();
  var i;
  var count = 0;
  if (select1.options.selectedIndex < 0)
    return false;
  for (i = 0; i < select1.options.length; i++) {
    if (select1.options[i].selected) {
      var val_select1 = select1.options[i].value;
      var text_select1 = select1.options[i].text;
      //alert('1st forloop text '+text_select1 + 'index '+i)
      select2.options[select2.options.length] = new Option(text_select1, val_select1, false, false);
      selectedArray[count] = i - count;
      count++;
    }
  }
  for (i = 0; i < selectedArray.length; i++) {
    //alert('2nd forloop selectedArray '+selectedArray[i])
    select1.options[selectedArray[i]] = null;
  }
  var tmpAry = new Array();
  for (i = 0; i < select2.options.length; i++) {
    tmpAry[i] = new Array();
    tmpAry[i][0] = select2.options[i].text;
    tmpAry[i][1] = select2.options[i].value;
    //alert('3rd forloop tmpAry-i-0 text '+tmpAry[i][0])
  }
  tmpAry.sort();
  //alert("before while select2optionslength ="+select2.options.length)
  while (select2.options.length > 0) {
    //alert('while loop')
    select2.options[0] = null;
  }
  for (var i = 0; i < tmpAry.length; i++) {
    var op = new Option(tmpAry[i][0], tmpAry[i][1]);
    //alert('last forloop '+op)
    select2.options[i] = op;
  }
  return;
}

function team2mem(sel, to, from) {

  var select1 = document.getElementById(sel);
  var select2 = document.getElementById(to);
  var select3 = document.getElementById(from);

  var selectedArray = new Array();
  var i;
  var count = 0;

  var maphash = {
    "teamA": ["member1", "member2", "member3"],
    "teamB": ["member4", "member5", "member6"],
    "teamC": ["member1", "member7", "member8"]
  };

  if (select1.options.selectedIndex < 0)
    return false;

  for (i = 0; i < select1.options.length; i++) {
    if (select1.options[i].selected) {
      var val_select1 = select1.options[i].value;
      var text_select1 = select1.options[i].text;
      //alert('1st forloop text '+text_select1 + ' index '+i);
      var apparr = maphash[text_select1];
      var apparrlen = apparr.length;
      //alert("apparray length = "+apparrlen);
      for (j = 0; j < apparrlen; j++) {
        var text_elem = maphash[text_select1][j];
        var var_elem = maphash[var_select1][j].value;
        //alert("new text ="+text_elem + " newvar ="+text_elem);
        select2.options[select2.options.length] = new Option(text_elem, val_elem, false, false);
        //selectedArray[count] = i-count;    
        count++;
      }

    }
  }
  return;
}

＆＃13;

<div align="center"><font color="red"><b><span id="Error_App"></span></b></font>
</div>
<br>
<font size=3><b>List Of Teams</b></font>
<table border=0 width=100%>
  <tr>
    <td width=35%>
      <select multiple="multiple" id="teams" style="width:100%;" size="10">
        <option value=AA>teamA</option>
        <option value=BB>teamB</option>
        <option value=CC>teamC</option>
      </select>
    </td>
    <td width=30% align="left">
      <input title='SelectTeamMem.' type="button" id="add" value="Select members by team ->" onclick="team2mem('teams', 'mems', 'bin')"></input>
    </td>
  </tr>
  <tr>
    <td width=10%></td>
    <td width=20% align="right">
      <td width=60% valign="bottom">
        <font size=2>Selected Members</font>
        <br>
        <select multiple="multiple" id="bin" style="width:100%;" size="10">
        </select>
      </td>
      <td width=10%></td>
  </tr>
</table>
<div align="center"><font color="red"><b><span id="Error_App"></span></b></font>
</div>
<br>
<font size=3><b>List of Members</b></font>
<table>
  <tr>
    <td width=35% valign="bottom">
      <select multiple="multiple" id="mems" style="width:100%;" size="10">
        <option value=16313>member1</option>
        <option value=16250>member2</option>
        <option value=15041>member3</option>
        <option value=15041>member4</option>
        <option value=15041>member5</option>
        <option value=15041>member6</option>
        <option value=15041>member7</option>
        <option value=15041>member8</option>
    </td>
    <td width=30% valign="top">
      <br>
      <br>
      <input title='SelectMembers' type="button" id="add" value="Select Members directly ->" onclick="appendapp('mems','bin')"></input>
    </td>
  </tr>
</table>

＆＃13;

Answer 1

尝试Backbone.js，它是一个轻量级的框架，用于与＃34;模型＆＃34;和＆＃34;收藏＆＃34;。对于e.x.在你的情况下，你可以拥有＆＃34;会员＆＃34;作为具有团队名称作为属性的模型。在视图中，您可以轻松处理点击事件并进行管理。

您可以在此处找到一些教程：http://backbonetutorials.com/

Answer 2

我建议在MDN上阅读有关Javascript数组方法的内容：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

专门查看地图，缩小和过滤。

另请考虑使用Underscore.js作为帮助程序库

javascript有助于将元素从一个列表移动到另一个列表

2 个答案: