有点难度，JS用户列表并选择填充？

本帖最后由 yzflying 于 2010-01-03 17:45:38 编辑

解决方案 »

  1.   

    仅供参考：
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title>test</title>
    </head>
    <body>
      <div style="float:left">
        <textarea id="toSend" style="width:400px;height=300px"></textarea>
      </div>
      <div style="float:left">
        <a href="javascript:;" id="company">总公司</a>
        <ul id="_company">
          <li><a href="javascript:;" id="company01">总公司员工1</a></li>
          <li><a href="javascript:;" id="company02">总公司员工2</a></li>
          <li><a href="javascript:;" id="company03">总公司员工3</a></li>
          <li><a href="javascript:;" id="company04">总公司员工4</a></li>
          <li><a href="javascript:;" id="company05">总公司员工5</a></li>
        </ul>
        <a href="javascript:;" id="subCompanyA">分公司1</a>
        <ul id="_subCompanyA">
          <li><a href="javascript:;" id="subCompanyA01">分公司1员工1</a></li>
          <li><a href="javascript:;" id="subCompanyA02">分公司1员工2</a></li>
          <li><a href="javascript:;" id="subCompanyA03">分公司1员工3</a></li>
        </ul>
      </div>
    <script type="text/javascript">
      //点击员工名字添加或删除员工
      function addOrDelOne(obj){
          var textbox = document.getElementById("toSend"),allSelectedWorkers = textbox.value.split(",");
          if(textbox.value.indexOf(obj.innerHTML) < 0){
              if(allSelectedWorkers[0] == ""){
                  allSelectedWorkers[0] = obj.innerHTML;
              }else{
                  allSelectedWorkers.push(obj.innerHTML);
              }
         
              textbox.value = allSelectedWorkers.join(",");
          }else{
              textbox.value = textbox.value.replace(eval("/(,|^)"+obj.innerHTML+"(?=,|$)/"),"").replace(/^,/,"");
          }
      }
      
      //点击总公司名字或分公司名字，如果还有人没加进去，则加进去，否则删除所有分公司人员
      function addOrDelAll(obj){
          var textbox = document.getElementById("toSend"),allSelectedWorkers = textbox.value.split(",");
          var workers = document.getElementById("_"+obj.id).getElementsByTagName("a");
          var allBeChecked = true;
          //判断是不是所有人都加进去了
          for(var idx in workers){
              if(typeof workers[idx] == "object"){
                  if(textbox.value.indexOf(workers[idx].innerHTML) < 0){
                      allBeChecked = false;
                      break;
                  }
              }
          }
          //如果所有人都加进去了，删除所有人并返回
          if(allBeChecked){
              var textboxVal = textbox.value;
              for(var idx in workers){
                  textboxVal = textboxVal.replace(eval("/(,|^)"+workers[idx].innerHTML+"(?=,|$)/"),"").replace(/^,/,"");
              }
              textbox.value = textboxVal;
              return;
          }
          //把没加进去的人加进去
          for(var idx in workers){
              if(typeof workers[idx] == "object"){
                  if(textbox.value.indexOf(workers[idx].innerHTML) < 0){
                      if(allSelectedWorkers[0] == ""){
                          allSelectedWorkers[0] = workers[idx].innerHTML;
                      }else{
                          allSelectedWorkers.push(workers[idx].innerHTML);
                      }
                  }
              }
          }
          textbox.value = allSelectedWorkers.join(",");
      }  //事件分配
      window.onload = function(){
              var allLinks = document.getElementsByTagName("a");          for(var idx in allLinks){
                  if(typeof allLinks[idx] == "object" && /\d/.test(allLinks[idx].id)){
                      allLinks[idx].onclick = function(){addOrDelOne(this)};
                  }else if(typeof allLinks[idx] == "object"){
                      allLinks[idx].onclick = function(){addOrDelAll(this)};
                  }
              }
          }
    </script>
    </body>
    </html>
      

  2.   

    window.onload改一下，测试2000人的极端情况，就我的电脑反应还行
      window.onload = function(){
              var html="";
              var html1="";
              for(var i=0;i<1000;i++){
                html += "<li><a href='javascript:;' id='company"+i+"'>总公司员工"+i+"</a></li>";
                html1 += "<li><a href='javascript:;' id='subCompanyA"+i+"'>分公司A员工"+i+"</a></li>";
              }
              document.getElementById("_company").innerHTML = html;
              document.getElementById("_subCompanyA").innerHTML = html1;          var allLinks = document.getElementsByTagName("a");
              for(var idx in allLinks){
                  if(typeof allLinks[idx] == "object" && /\d/.test(allLinks[idx].id)){
                      allLinks[idx].onclick = function(){addOrDelOne(this)};
                  }else if(typeof allLinks[idx] == "object"){
                      allLinks[idx].onclick = function(){addOrDelAll(this)};
                  }
              }
          }