Automating form - update html - but not visibly seen by user
<p>I am using the javascript populate_extensions function as below to populate a dropdown from a custom application html.  The populate_extensions() function works ok and updates the html, you can see this, eg in a web browser like Chrome dev tools/debugger, but the dropdown is not visibly populated.  ie the function runs but if the user clicks on the dropdown - no changes are seen.</p>

<p>Is there a refresh function which would update the dropdown?  Anyone any ideas?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
function getdiv(strFieldID) {
 var item;
 var lstElements = document.getElementsByTagName("div");
 for (var i = 0; i &lt; lstElements.length; i++) {
   if (lstElements[i].id.substr(lstElements[i].id.lastIndexOf("_") + 1) == strFieldID) {
     item = lstElements[i];
   }
 }
 return item;
}


function populate_extensions(fieldid) {
   // demo
   var newstring = "[{v:&amp;quot;3331&amp;quot;},{v:&amp;quot;3332&amp;quot;},{v:&amp;quot;3333&amp;quot;},{v:&amp;quot;3334&amp;quot;}]";
   var item = getdiv(fieldid);
    var i;
    for(i = 0; i &lt; item.childNodes.length; ++i) {
        if(item.childNodes[i].nodeType == 1 &amp;&amp; item.childNodes[i].nodeName  == "DIV") {
           item.childNodes[i].attributes['arselmenu'].value = newstring;
        }
    }
}

&lt;/script&gt;

&lt;form name="frm"&gt;
&lt;input type="button" value="populate" onclick="populate_extensions('536870915');" /&gt;
&lt;/form&gt;

&lt;div id="WIN_0_536870915" arid=536870915 artype="EnumSel" ardbn="devicelist" arlbox="0,4,54,17" class="df arfid536870915 ardbndevicelist EnumSel" style="z-index:1002&amp;#59;top:81&amp;#59; left:492&amp;#59; width:199&amp;#59; height:21&amp;#59;"&gt;
&lt;label id="label536870915" class="label f6" for="x-arid_WIN_0_536870915" style="top:4&amp;#59; left:0&amp;#59; width:54&amp;#59; height:17&amp;#59;"&gt;Extensions&lt;/label&gt;
&lt;div class="selection" style="top:0&amp;#59; left:59&amp;#59; width:140&amp;#59; height:21&amp;#59;" arselmenu="[{v:&amp;quot;3331&amp;quot;},{v:&amp;quot;3332&amp;quot;},{v:&amp;quot;3333&amp;quot;}]"&gt;
&lt;input id="arid_WIN_0_536870915" type="text" class="text " readonly style="top:0&amp;#59; left:0&amp;#59; width:119&amp;#59; height:21&amp;#59;" /&gt;
&lt;a href="javascript:" class="btn btn3d selectionbtn" style="top:0&amp;#59; left:119&amp;#59; width:21&amp;#59; height:21&amp;#59;"&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
