JS二级联动、模仿邮箱点击联系人增加联系人到输入框

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
   var subcat = new Array();
   subcat[0] = new Array('001','abc','000001')
   subcat[1] = new Array('001','abd','000002')
   subcat[2] = new Array('010','wwwwww','000003')
   subcat[3] = new Array('010','fujifilm','000004')
   subcat[4] = new Array('011','zhanjiang','000005')
   subcat[5] = new Array('011','yinglun','000006')
   subcat[6] = new Array('011','jinshu','000007')
   subcat[7] = new Array('100','a8435','000008')

   function friendGroupsChanged(id)
 {      
    document.form1.friends.length = 0;  
    if(id != "") {
       document.form1.friends.length = 0;     
       for (i=0; i<subcat.length; i++)
        {
           if (subcat[i][0] == id)
           {document.form1.friends.options[document.form1.friends.length] = new Option(subcat[i][1], subcat[i][2]);}                                   
        }   
    }  
     else {
       for (i=0; i<subcat.length; i++)          
          document.form1.friends.options[document.form1.friends.length] = new Option(subcat[i][1], subcat[i][2]);  
    }
 }
function friendsChanged(name)
 {
    var txtname = $("txtName").value;
    var flag = 1;
    if(txtname.length>0) {
       var arrname = txtname.split(';');
       for(var i=0;i<arrname.length;i++) {
          //重复的不加上去
          if(arrname[i] == name) {
             flag = 0;
             break;
          }
        }
     }
     if(flag==1) $("txtName").value += name + ";";
 }
function $(obj){return document.getElementById(obj);}
window.onload = function(){ friendGroupsChanged('');}
</script>

</head>
<body>
    <form name="form1">
    <div style="float: left">
        收信人:<input type="text" name="txtName" id="txtName" style=" 300px" />
    </div>
    <div style="float: left">
        <div>
            联系人群组:
            <select id="friendGroups" name="friendGroups" onchange="friendGroupsChanged(this.value)">
                <option value="">所有好友</option>
                <option value="001">朋友</option>
                <option value="010">同学</option>
                <option value="011">同事</option>
                <option value="100">其它</option>
            </select>
        </div>
        <div>
            <select id="friends" name="friends" onchange="friendsChanged(this.options[this.selectedIndex].text)" style=" 200px; height: 180px;" multiple="multiple">
            </select>
        </div>
    </div>
    </form>
</body>
</html>

原文地址:https://www.cnblogs.com/gdjlc/p/2086911.html