JS二级联动多选框

时间  2021-08-12
标签 javascript html java ide spa orm xml htm 栏目 JavaScript 繁體版
原文   原文链接

 

  
  
           
  
  
    
   
   
            
   
   
  1. <html> 
    2. 
   
   
            
   
   
  2. <head> 
    3. 
   
   
            
   
   
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    4. 
   
   
            
   
   
  4. <script language="JavaScript"> 
    5. 
   
   
            
   
   
  5. <!-- 
    6. 
   
   
            
   
   
  6. function addSrcToDestList() { 
    7. 
   
   
            
   
   
  7. destList = window.document.forms[0].destList; 
    8. 
   
   
            
   
   
  8. srcList = window.document.forms[0].srcList; 
    9. 
   
   
            
   
   
  9. var len = destList.length; 
    10. 
   
   
            
   
   
  10. for(var i = 0; i < srcList.length; i++) { 
    11. 
   
   
            
   
   
  11. if ((srcList.options[i] != null) && (srcList.options[i].selected)) { 
    12. 
   
   
            
   
   
  12. var found = false; 
    13. 
   
   
            
   
   
  13. for(var count = 0; count < len; count++) { 
    14. 
   
   
            
   
   
  14. if (destList.options[count] != null) { 
    15. 
   
   
            
   
   
  15. if (srcList.options[i].text == destList.options[count].text) { 
    16. 
   
   
            
   
   
  16. found = true; 
    17. 
   
   
            
   
   
  17. break; 
    18. 
   
   
            
   
   
  18. } 
    19. 
   
   
            
   
   
  19. } 
    20. 
   
   
            
   
   
  20. } 
    21. 
   
   
            
   
   
  21. if (found != true) { 
    22. 
   
   
            
   
   
  22. destList.options[len] = new Option(srcList.options[i].text); 
    23. 
   
   
            
   
   
  23. len++; 
    24. 
   
   
            
   
   
  24. } 
    25. 
   
   
            
   
   
  25. } 
    26. 
   
   
            
   
   
  26. } 
    27. 
   
   
            
   
   
  27. } 
    28. 
   
   
            
   
   
  28. function deleteFromDestList() { 
    29. 
   
   
            
   
   
  29. var destList = window.document.forms[0].destList; 
    30. 
   
   
            
   
   
  30. var len = destList.options.length; 
    31. 
   
   
            
   
   
  31. for(var i = (len-1); i >= 0; i--) { 
    32. 
   
   
            
   
   
  32. if ((destList.options[i] != null) && (destList.options[i].selected == true)) { 
    33. 
   
   
            
   
   
  33. destList.options[i] = null; 
    34. 
   
   
            
   
   
  34. } 
    35. 
   
   
            
   
   
  35. } 
    36. 
   
   
            
   
   
  36. } 
    37. 
   
   
            
   
   
  37.  
    38. 
   
   
            
   
   
  38. var array=new Array(); 
    39. 
   
   
            
   
   
  39. array[0]='<option value="系统管理员">系统管理员</option><option value="安检科采煤科长">安检科采煤科长</option>' 
    40. 
   
   
            
   
   
  40. array[1]='<option value="安检科科长">安检科科长</option>' 
    41. 
   
   
            
   
   
  41. array[2]='<option value="安装队责任人">安装队责任人</option>' 
    42. 
   
   
            
   
   
  42. array[3]='<option value="供应科内业科长">供应科内业科长</option><option value="机电科科长">机电科科长</option>' 
    43. 
   
   
            
   
   
  43.  
    44. 
   
   
            
   
   
  44. function change(w){ 
    45. 
   
   
            
   
   
  45.  str='<select style="width:100;font-size:13px" size="5" name="srcList" multiple onchange="javascript:addSrcToDestList()">'  
    46. 
   
   
            
   
   
  46.  str+=array[w] 
    47. 
   
   
            
   
   
  47.  str+='</select>' 
    48. 
   
   
            
   
   
  48.     sList.innerHTML=str 
    49. 
   
   
            
   
   
  49. } 
    50. 
   
   
            
   
   
  50. </SCRIPT> 
    51. 
   
   
            
   
   
  51. </head> 
    52. 
   
   
            
   
   
  52.  
    53. 
   
   
            
   
   
  53. <body> 
    54. 
   
   
            
   
   
  54. <center> 
    55. 
   
   
            
   
   
  55. <form method="POST"> 
    56. 
   
   
            
   
   
  56. <table bgcolor="#FFFFCC"> 
    57. 
   
   
            
   
   
  57. <tr> 
    58. 
   
   
            
   
   
  58. <td align="center"> 
    59. 
   
   
            
   
   
  59. 收件人列表: 
    60. 
   
   
            
   
   
  60. </td> 
    61. 
   
   
            
   
   
  61. <td> 
    62. 
   
   
            
   
   
  62. 已选收件人: 
    63. 
   
   
            
   
   
  63. </td> 
    64. 
   
   
            
   
   
  64. </tr> 
    65. 
   
   
            
   
   
  65. <tr> 
    66. 
   
   
            
   
   
  66. <td bgcolor="#FFFFCC" width="400"> 
    67. 
   
   
            
   
   
  67. <select style='width:100;font-size:13px' id="subList" size="5" name="subList" multiple onchange="javascript:change(subList.value);event.cancelBubble=true;return false"> 
    68. 
   
   
            
   
   
  68. <option value="0">安检科</option> 
    69. 
   
   
            
   
   
  69. <option value="1">调度室</option> 
    70. 
   
   
            
   
   
  70. <option value="2">培训科</option> 
    71. 
   
   
            
   
   
  71. <option value="3">生产科</option> 
    72. 
   
   
            
   
   
  72. <option value="4">巷修二队</option> 
    73. 
   
   
            
   
   
  73. <option value="5">财务科</option> 
    74. 
   
   
            
   
   
  74. </select> 
    75. 
   
   
            
   
   
  75. <span id="sList"> 
    76. 
   
   
            
   
   
  76. <select style='width:100;font-size:13px' size="5" name="srcList" multiple onchange="javascript:addSrcToDestList()"> 
    77. 
   
   
            
   
   
  77. </select> 
    78. 
   
   
            
   
   
  78. </span> 
    79. 
   
   
            
   
   
  79. </td> 
    80. 
   
   
            
   
   
  80. <td bgcolor="#FFFFCC" width="69"> 
    81. 
   
   
            
   
   
  81. <select style='width:100;font-size:13px' size="5" name="destList" multiple> 
    82. 
   
   
            
   
   
  82. </select> 
    83. 
   
   
            
   
   
  83. </td> 
    84. 
   
   
            
   
   
  84. </tr> 
    85. 
   
   
            
   
   
  85. <tr> 
    86. 
   
   
            
   
   
  86. <td colspan="3" align="center">&nbsp; 
    87. 
   
   
            
   
   
  87. </td> 
    88. 
   
   
            
   
   
  88. </tr> 
    89. 
   
   
            
   
   
  89. <tr> 
    90. 
   
   
            
   
   
  90. <td align="center"> 
    91. 
   
   
            
   
   
  91. <input type="button" value=" 肯定 " onclick=""> 
    92. 
   
   
            
   
   
  92. </td> 
    93. 
   
   
            
   
   
  93. <td> 
    94. 
   
   
            
   
   
  94. <input type="button" value=" 从右边删除 " onclick="javascript:deleteFromDestList();"> 
    95. 
   
   
            
   
   
  95. </td> 
    96. 
   
   
            
   
   
  96. </tr> 
    97. 
   
   
            
   
   
  97. </table> 
    98. 
   
   
            
   
   
  98. </form> 
    99. 
   
   
            
   
   
  99. </body> 
    100. 
   
   
            
   
   
  100. </html>
    101.
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程