Начало
Формы
Пункты Список Popup
Вы можете заметить, что Ваша страница может быстро становиться загроможденной. Этот подлинник помогает решить ту проблему, открывая новое окно, когда пользователь хочет добавить пункты к списку.
(Click "Add Item" to demo this script!)
JavaScript Forms: Пункты Список Popup
<!-- THREE STEPS TO INSTALL ITEMS POPUP LIST: 1. Paste the first code into a new file, save it as: modify.html 2. Copy the coding into the HEAD of your HTML document 3. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste the first code into a new file, save it as: modify.html --> <html> <head> <script language="JavaScript"> Begin <!-- // Add the selected items in the parent by calling method of parent function addSelectedItemsToParent() { self.opener.addToParentList(window.document.forms[0].destList); window.close(); } // Fill the selcted item list with the items already present in parent. function fillInitialDestList() { var destList = window.document.forms[0].destList; var srcList = self.opener.window.document.forms[0].parentList; for (var count = destList.options.length - 1; count >= 0; count--) { destList.options[count] = null; } for(var i = 0; i < srcList.options.length; i++) { if (srcList.options[i] != null) destList.options[i] = new Option(srcList.options[i].text); } } // Add the selected items from the source to destination list function addSrcToDestList() { destList = window.document.forms[0].destList; srcList = window.document.forms[0].srcList; var len = destList.length; for(var i = 0; i < srcList.length; i++) { if ((srcList.options[i] != null) && (srcList.options[i].selected)) { //Check if this value already exist in the destList or not //if not then add it otherwise do not add it. var found = false; for(var count = 0; count < len; count++) { if (destList.options[count] != null) { if (srcList.options[i].text == destList.options[count].text) { found = true; break; } } } if (found != true) { destList.options[len] = new Option(srcList.options[i].text); len++; } } } } // Deletes from the destination list. function deleteFromDestList() { var destList = window.document.forms[0].destList; var len = destList.options.length; for(var i = (len-1); i >= 0; i--) { if ((destList.options[i] != null) && (destList.options[i].selected == true)) { destList.options[i] = null; } } } // End --> </SCRIPT> </head> <body onLoad="javascript:fillInitialDestList();"> <center> <form method="POST"> <table bgcolor="#FFFFCC"> <tr> <td bgcolor="#FFFFCC" width="74">Available</td> <td bgcolor="#FFFFCC"> </td> <td bgcolor="#FFFFCC" width="69">Selected</td> </tr> <tr> <td bgcolor="#FFFFCC" width="85"> <select size="6" name="srcList" multiple> <option value="1">Item 1 <option value="2">Item 2 <option value="3">Item 3 <option value="4">Item 4 <option value="5">Item 5 <option value="6">Item 6 </select> </td> <td bgcolor="#FFFFCC" width="74" align="center"> <input type="button" value=" >> " onClick="javascript:addSrcToDestList()"> <br><br> <input type="button" value=" << " onclick="javascript:deleteFromDestList();"> </td> <td bgcolor="#FFFFCC" width="69"> <select size="6" name="destList" multiple> </select> </td> </tr> <tr> <td colspan=3 align="center"> <input type="button" value="Done" onClick = "javascript:addSelectedItemsToParent()"> </td> </tr> </table> </form> </body> </html> <!-- STEP TWO: Paste this code into the HEAD of your HTML document --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <! > <! > <!-- Begin function small_window(myurl) { var newWindow; var props = 'scrollBars=yes,resizable=yes,toolbar=no,menubar=no,location=no,directories=no,width=300,height=200'; newWindow = window.open(myurl, "Add_from_Src_to_Dest", props); } // Adds the list of selected items selected in the child // window to its list. It is called by child window to do so. function addToParentList(sourceList) { destinationList = window.document.forms[0].parentList; for(var count = destinationList.options.length - 1; count >= 0; count--) { destinationList.options[count] = null; } for(var i = 0; i < sourceList.options.length; i++) { if (sourceList.options[i] != null) destinationList.options[i] = new Option(sourceList.options[i].text, sourceList.options[i].value ); } } // Marks all the items as selected for the submit button. function selectList(sourceList) { sourceList = window.document.forms[0].parentList; for(var i = 0; i < sourceList.options.length; i++) { if (sourceList.options[i] != null) sourceList.options[i].selected = true; } return true; } // Deletes the selected items of supplied list. function deleteSelectedItemsFromList(sourceList) { var maxCnt = sourceList.options.length; for(var i = maxCnt - 1; i >= 0; i--) { if ((sourceList.options[i] != null) && (sourceList.options[i].selected == true)) { sourceList.options[i] = null; } } } // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <center> <form method=post> <table border=1 bgcolor="#ffffcc"> <tr> <td> <select size=5 name=parentList multiple> </select> </td> </tr> <tr> <td align=center> <input type=button value="Add Item" onclick = "javascript:small_window('modify.html');"> <input type=button value="Delete Item" onclick = "javascript:deleteSelectedItemsFromList(parentList);"> </td> </tr> </table> </form> </center> <!-- Script Size: 5.27 KB -->