Home|Sitemap|Contact
 

How can you select all items in a select list in a popup window and pass them to the parent window?

This example will open a popup window which has a select list. A button on the popup window allows you to select all items in the list and place the values on this page in a text field.  The example was created in response to question.  [More functional example]

UPDATE: [21 Jan 2006] Changed method of returning values from the child popup window to call an update function in the parent page. Direct access to the field from the child did not work in Gecko engine browsers.

The Example:


<!--THIS PAGE-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="? 2005 Roderick Divilbiss">
<title>Select All In List</title>
<script language="javascript" type="text/javascript">
<!--
var childPopup = null;

function openPopup() {
  // If the child popup is open, close it.
  if (childPopup != null) {
    if (childPopup.closed == false)
      childPopup.close()
  }
  // open the child popup.
  childPopup = window.open('pop_up_list.htm','child');
  // return the window handle.
  return childPopup;
}
function doUpdate(vals) {
  document.getElementById('cpValues').value=vals;
}
//-->
</script>
</head>
</head>

<body>
<input type="text" id="cpValues" name="cpValues" size="50">
<input type="button" value="Open Popup" onclick="openPopup();">
</body>

</html>

<!-- THE CHILD POPUP NAMED "pop_up_list.htm" -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="? 2005 Roderick Divilbiss">
<script language="javascript" type="text/javascript">
<!--
function selectAllList() {
  // get the options collection of the list box
  var cOptions = document.getElementById('cpList').options;
  // set a return value string to empty.
  var sValues='';
  // loop through the options collection to get all values
  // and append them to the return value string.
  for (var idx=0;idx<cOptions.length;idx++){
    sValues += cOptions(idx).value + ',';
  }
  // send the values in the parent page
  sValues = sValues.substr(0,sValues.length-1);
  // and close this popup window
  window.opener.doUpdate(sValues);
  window.close();
}
//-->
</script>
<title>Pop Up List</title>
</head>

<body>
<p><select size="1" name="cpList">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select><input type="button" value="Select All" name="selectAll" onclick="selectAllList();"></p>
</body>

</html>