knowledge of Javascript I don't think it is possible, but I'll punt anyway.
I downloaded and very slightly adapted this guy's Javascript "combo box" -
http://sandy.mcarthur.org/javascript/select/select.html. It allows my users
(when I get some!) to select from a list of preexisting options and also to
add a new one by clicking on "add new". Essentially it's a select control
that turns into an input control when the "add new" option is clicked. (I
think that's how it works.) There may be several of these on a page. What
I would like is for the user's added option to be included on all the other
select controls.
The original page is of necessity behind a login
(http://www.listyblue.com/config.php), so I've cut and pasted the HTML for
it here.
The Javascript is at the bottom.
+e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Change item groups and reminder intervals</title>
<!-- This page uses Javascript to populate a "combo box" style select
input, i.e. it allows the user to edit it as well as select from existing
options -->
<!-- This script is "borrowed" from a Mr Sandy McArthur, whose original
implementation is to be found here -
http://sandy.mcarthur.org/javascript/select/select.html -->
<style type="text/css">
@import "css.css";
</style>
<script type="text/javascript" src="select.js"></script>
</head>
<body>
<div id="topper">
<img class="logo" src="logo.gif" alt="logo" />
<h1><span class="hidden">listyblue </span>the list manager</h1>
</div<!-- topper -->
<h1>Barfkins McDoodle's items</h1><div id="right"><img class="fixedimage"
src="/userimages/barfkins.gif" alt="mascot image" /><div class="long"
style="clear:both"></div></div><div id="list"><form
action="configprocess.php" method="post"><table><tr><th>Item</th><th
>Group</th><th>Reminder Interval</th></tr><tr>
<td><input type="checkbox" checked="checked" name="new[]" value="Beer"
/>Beer</td>
<td><script type="text/javascript">document.write( '<select class="editable
keepSorted" name="newgroup[]"><option class="righter" value="Alcohol"
selected="selected">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select');</script></td>
<noscript><td><input name="newgroup[]" type="text" maxlength = "24"
value="Alcohol" /></td></noscript>
<td><input class="threer" name="newremint[]" type="text" value = "0"
maxlength = "3" /></td>
</tr>
<tr><td><input type="checkbox" checked="checked" name="new[]" value="Wine"
/>Wine</td><td><script type="text/javascript">document.write( '<select
class="editable keepSorted" name="newgroup[]"><option class="righter"
value="Alcohol" selected="selected">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Alcohol" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Milk" />Milk</td><td><script type="text/javascript">document.write(
'<select class="editable keepSorted" name="newgroup[]"><option
class="righter" value="Alcohol">Alcohol</option><option class="righter"
value="Dairy" selected="selected">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Dairy" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Cheese" />Cheese</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter" value="Dairy"
selected="selected">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Dairy" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Juice" />Juice</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter" value="Fruit"
selected="selected">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Fruit" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Fruit" />Fruit</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter" value="Fruit"
selected="selected">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Fruit" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="i want one of those" />i want one of those</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter" value="General"
selected="selected">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="General" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="New item 2" />New item 2</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter" value="General"
selected="selected">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="General" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="New item 3" />New item 3</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter" value="General"
selected="selected">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="General" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Mince" />Mince</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter" value="Meat"
selected="selected">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Meat" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Beef" />Beef</td><td><script type="text/javascript">document.write(
'<select class="editable keepSorted" name="newgroup[]"><option
class="righter" value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter" value="Meat"
selected="selected">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Meat" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Cereals" />Cereals</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter" value="Staples"
selected="selected">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Staples" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Croissants" />Croissants</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter" value="Staples"
selected="selected">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Staples" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Shampoo" />Shampoo</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter" value="Toiletries"
selected="selected">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Toiletries" /></td></noscript><td><input
class="threer" name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Washing powder" />Washing powder</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter" value="Toiletries"
selected="selected">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Toiletries" /></td></noscript><td><input
class="threer" name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Fabric conditioner" />Fabric conditioner</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter" value="Toiletries"
selected="selected">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Toiletries" /></td></noscript><td><input
class="threer" name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Washingup liquid" />Washingup liquid</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter" value="Toiletries"
selected="selected">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Toiletries" /></td></noscript><td><input
class="threer" name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Scalextric" />Scalextric</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter" value="Toys"
selected="selected">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Toys" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="BMX" />BMX</td><td><script type="text/javascript">document.write(
'<select class="editable keepSorted" name="newgroup[]"><option
class="righter" value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter" value="Toys"
selected="selected">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Toys" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Tool set" />Tool set</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter" value="Toys"
selected="selected">Toys</option><option class="righter"
value="Vegetables">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Toys" /></td></noscript><td><input class="threer"
name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr><tr><td><input type="checkbox" checked="checked" name="new[]"
value="Vegetables" />Vegetables</td><td><script
type="text/javascript">document.write( '<select class="editable keepSorted"
name="newgroup[]"><option class="righter"
value="Alcohol">Alcohol</option><option class="righter"
value="Dairy">Dairy</option><option class="righter"
value="Fruit">Fruit</option><option class="righter"
value="General">General</option><option class="righter"
value="Meat">Meat</option><option class="righter"
value="Staples">Staples</option><option class="righter"
value="Toiletries">Toiletries</option><option class="righter"
value="Toys">Toys</option><option class="righter" value="Vegetables"
selected="selected">Vegetables</option><option class="righter"
value="General">General</option></select>
');</script></td><noscript><td><input name="newgroup[]" type="text"
maxlength = "24" value="Vegetables" /></td></noscript><td><input
class="threer" name="newremint[]" type="text" value = "0" maxlength = "3"
/></td></tr></table><div class="buttonhole"><div class="inline"><input
type="submit" name="submit" value="Change items" class="bigbtn"
/></div></div<!-- buttonhole --></form></div<!-- list -->
<div id="footer">
<hr />
<h3><a href="http://www.listyblue.com/main.php">www.listyblue.com</a></h3>
</div<!-- footer -->
</body>
</html>
// Editable Select Boxes 0.5.2//// Copyright 2005 Sandy McArthur:
http://Sandy.McArthur.org///// You are free to use this code however you
please as long as the// above copyright is preserved. It would be nice if
you sent me// any bug fixes or improvements you make.//
var EditableSelect = { /** The value used to indicate an option is
the "edit" value. */ "editValue": "editit", /** The text used when
creating an edit option for a select box. */ "editText": "*add new*",
/** The text used when creating an edit option for a select box. */
"editClass": "activateEdit", /** * Finds all select elements and
if they have the "editable" CSS class then * it makes that select be
editable. */ "activateAll": function () { var selects =
document.getElementsByTagName("select"); for (var i=0; i <
selects.length; i++) { var select = selects[i]; if
(EditableSelect.hasClass(select, "editable")) {
EditableSelect.activate(select); } } }, /**
Makes the select element editable. */ "activate": function (select)
{ if (!EditableSelect.selectHasEditOption(select)) {
EditableSelect.selectAddEditOption(select); }
select.oldSelection = select.options.selectedIndex;
EditableSelect.addEvent(select, "change", EditableSelect.selectOnChage);
EditableSelect.addClass(select, "editable"); }, /** Does the
select box have an edit option. */ "selectHasEditOption": function
(select) { var options = select.options; for (var i=0; i <
options.length; i++) { if (options.item(i).value ==
EditableSelect.editValue) { return
} } return false; }, /** Add an edit
option to the select box. */ "selectAddEditOption": function (select)
{ var option = document.createElement("option"); option.value
= EditableSelect.editValue; option.text = EditableSelect.editText;
option.className = EditableSelect.editClass;
EditableSelect.selectAddOption(select, option, 0); }, /** *
Add an option to the select box at specified postion. * "index" is
optionial, if left undefined then the end is assumed. */
"selectAddOption": function (select, option, index) { if
(select.options.add) { if (typeof index == "undefined")
{ select.options.add(option); } else
{ select.options.add(option,index); } }
else { if (typeof index == "undefined") {
select.insertBefore(option); } else { var before =
select.options.item(index); select.insertBefore(option,
before); } } }, /** * Event handler for
select box. If the edit option is selected it * switches to the edit
input field. */ "selectOnChage": function (evt) { var select =
this; if (evt.srcElement) select = evt.srcElement; // For IE
if (select.value == EditableSelect.editValue) { var input =
document.createElement("input"); input.type = "text";
input.value = select.options.item(select.oldSelection).value;
input.className = select.className; input.name = select.name;
input.selectOnChange = select.onchange;
EditableSelect.addEvent(input, "blur", EditableSelect.inputOnBlur);
EditableSelect.addEvent(input, "keypress", EditableSelect.inputOnKeyPress);
var oldOptions = []; for (var i=0; i < select.options.length;
i++) { var o = select.options.item(i); var sn
= o; var oo = EditableSelect.serializeOption(o);
oldOptions[oldOptions.length] = oo; }
select.parentNode.replaceChild(input, select); input.focus();
input.select(); input.oldOptions =
} else { select.oldSelection =
select.options.selectedIndex; } }, /** * Event handler
for the input field when the field has lost focus. * This rebuilds the
select box possibly adding a new option for what * the user typed.
*/ "inputOnBlur": function (evt) { var input = this; if
(evt.srcElement) input = evt.srcElement; // For IE var keepSorted =
EditableSelect.hasClass(input, "keepSorted"); var value =
input.value; var select = document.createElement("select");
select.className = input.className; select.name = input.name;
select.onchange = input.selectOnChange; var selectedIndex
= -1; var optionIndex = 0; var oldOptions = input.oldOptions;
var newOption = {"text": value, "value": value }; for (var i=0; i <
oldOptions.length; i++) { var n = oldOptions[i];
if (newOption != null && EditableSelect.inputCompare(n,
newOption) == 0) { newOption = null; } else if
(keepSorted && newOption != null && EditableSelect.inputCompare(n,
newOption) 0) { EditableSelect.selectAddOption(select,
EditableSelect.deserializeOption(newOption));
selectedIndex = optionIndex; optionIndex++;
newOption = null; } if (selectedIndex
== -1 && n.value == value) { selectedIndex =
; } var opt =
EditableSelect.deserializeOption(n);
EditableSelect.selectAddOption(select, opt); optionIndex++;
input.oldOptions[i] = null; } if (newOption != null)
{ var opt = EditableSelect.deserializeOption(newOption);
EditableSelect.selectAddOption(select, opt);
select.options.selectedIndex = optionIndex; select.oldSelection =
select.options.selectedIndex; } else {
select.options.selectedIndex = selectedIndex; select.oldSelection
= select.options.selectedIndex; }
EditableSelect.activate(select);
input.parentNode.replaceChild(select, input); select.blur();
if (select.onchange) select.onchange(); }, "inputCompare":
function (x, y) { if (x.value == EditableSelect.editValue && y.value
== EditableSelect.editValue) { return 0; } if
(x.value == EditableSelect.editValue) { return -1; }
if (y.value == EditableSelect.editValue) { return 1; }
var xText = x.text ? x.text.toUpperCase() : ""; var yText = y.text ?
y.text.toUpperCase() : ""; if (xText < yText) {
return -1; } else if (xText == yText) { return
} else { return 1; } }, /** Intercept enter
key presses to prevent form submit but still update the field. */
"inputOnKeyPress": function (evt) { var e; if (evt)
{ e = evt; } else if (window.event) { e =
window.event; } else { throw
"EditableSelect.inputOnKeyPress: Unable to find the event."; }
if (e.keyCode == 13) { if (e.currentTarget) {
e.currentTarget.blur(); return false; // Prevent form
} else if (e.srcElement) { e.srcElement.blur();
return false; // Prevent form submit } else {
throw "EditableSelect.inputOnKeyPress: Unknown event
} } return true; }, /** Convert an
option element to a form that can be attached to the input element. */
"serializeOption": function (option) { var ser = {}; if
(option.text) ser.text = option.text; if (option.value) ser.value =
option.value; if (option.disabled) ser.disabled = option.disabled;
if (option.label) ser.label = option.label; if (option.className)
ser.className = option.className; if (option.title) ser.title =
option.title; if (option.id) ser.id = option.id; return
; }, /** Reverse the serializeOption function into an option
element. */ "deserializeOption": function (ser) { var option =
document.createElement("option"); if (ser.text) option.text =
ser.text; if (ser.value) { option.value =
ue; } else if (ser.text) { option.value =
t; } if (ser.disabled) option.disabled = ser.disabled;
if (ser.label) option.label = ser.label; if (ser.className)
option.className = ser.className; if (ser.title) option.title =
ser.value; if (ser.id) option.id = ser.id; return
ion; }, /** Does this element have the CSS class? */
"hasClass": function (element, clazz) { var regex = new
RegExp('\\b'+clazz+'\\b'); return
ex.test(element.className); }, /** Append the CSS class to the
element if it doesn't exist. */ "addClass": function (element, clazz)
{ if (!EditableSelect.hasClass(element, clazz)) {
element.className = element.className + " " + clazz; } },
/** Remove the CSS class from the element if it exist. */ "removeClass":
function (element, clazz) { if (EditableSelect.hasClass(element,
clazz)) { element.className = element.className.replace(clazz,
""); } }, // From:
http://www.scottandrew.com/weblog/articles/cbs-events /** Add an event in
a cross browser way. */ "addEvent": function (obj, evType, fn,
useCapture) { if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture); return
} else if (obj.attachEvent){ var r =
obj.attachEvent("on"+evType, fn); return r; } else
{ alert("Handler could not be attached"); } },
/** Remove an event in a cross browser way. */ "removeEvent": function
(obj, evType, fn, useCapture){ if
(obj.removeEventListener){ obj.removeEventListener(evType, fn,
useCapture); return true; } else if
(obj.detachEvent){ var r = obj.detachEvent("on"+evType, fn);
return r; } else { alert("Handler could not be
"); } }}
EditableSelect.addEvent(window, 'load', EditableSelect.activateAll);
