An add item event when changing the value of the select1 field

[sniper]

hi all;
I will try to explain my problem
My final aim is to capture a change of a select1 field
(selection="open") and add items (starting by the string seized by the
user) to the selct1 items (what happen when you enter the mail adress
of a person in your mail account you will have a list of person
starting by the string you seized).
To do this ,i start by this xhtml page:

<?xml version="1.0" encoding="UTF-8"?>
<xhtml:html xmlns="http://xforms.websynapsis.com"
xmlns:books="http://books.websynapsis.com"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xhtml:head>

<xf:model id="myModel">
<xf:instance xmlns="" id="myInstance">
<instanceData selected="none">
<itemlist>
<item>Item #1</item>
<item>Item #2</item>
<item>Item #3</item>
</itemlist>
</instanceData>
</xf:instance>

<xf:bind model="myModel"
nodeset="instance('myInstance')/itemlist/item[position()&lt;6]"
id="__items" />
</xf:model>

<xhtml:script type="text/javascript">
<![CDATA[
function affiche1()
{
var model = document.getElementById("myModel");
var instanceDoc = model.getInstanceDocument("myInstance");
var sel = document.getElementById("__itemList");
sel.addEventListener("xforms-value-changed",g,true) ;
}
function g()
{
changeModel(1)
}
function changeModel(count1)
{
var model = document.getElementById("myModel");
if(model != null)
{
var inst = model.getInstanceDocument("myInstance");
if(inst != null)
{
var insertPoint =
inst.getElementsByTagName("itemlist").item(0);
var itemCount =
insertPoint.getElementsByTagName("item").length;
var k=0;
if(k<count1)
{
var item = document.createElementNS("",
"item");
item.appendChild(document.createTextNode("Item #"
+
(itemCount+k+1)));

insertPoint.appendChild(item);
k=k+1;
}
}
rafraichir(model);
}
}

function rafraichir(model)
{
model.rebuild();
model.refresh();
alert("Arrivée à la fin")
}
]]>
</xhtml:script>

<xhtml:style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
xf|select1 div { width: 100px; }

</xhtml:style>

</xhtml:head>

<xhtml:body>

<xhtml:table border="0" cellspacing="0" cellpadding="0">
<xhtml:tr>
<xhtml:td valign="top">

<xf:select1 id="__itemList" ref="@selected"
selection="open"
appearance="minimal">
<xf:itemset model="myModel"
nodeset="instance('myInstance')/itemlist/item" id="__items">
<xf:label ref="." />
<xf:value ref="." />
</xf:itemset>
</xf:select1>

<xhtml:span style="font-weight:bold">Selected
item: </xhtml:span>
<xfutput model="myModel" ref="@selected" />
</xhtml:td>
<xhtml:td width="20px">
</xhtml:td>
</xhtml:tr>
</xhtml:table>
<xhtml:br />
<xhtml:br />
<xhtml:input type="button" value="Add Listener" onclick="affiche1();"
/>
<xhtml:input type="button" value="Add More Items "
onclick="changeModel(1);" />
<xhtml:br />
</xhtml:body>
</xhtml:html>

In this sample code if you click the Add More Items you will see that
ther's a new item4 in the list of items of select1.
Now if you click the Add listener button (i will expect to have an
event listener which listen to a change value of the select1 field
;this listener will add a new item every time you change the value of
select1 field) what happen is a firefox mozilla crash and is caused by:
the rafraichir(model) function

thanks for your help.