[thelist] dynamically populating <SELECT> when selected

Tom Schmidt ildenizen at insightbb.com
Thu Dec 15 16:24:35 CST 2005


I have been trying to accomplish a small feat with the standard SELECT input.  
My problem is that our application loads very large set of data for each select input.
All of this data is loaded from a database query, and all of these queries happen each
time the page is loaded.  
Since users of this application only occasionally select some of these inputs, my idea
is to only populate the options for the select list when the select box or select arrow
is clicked.  An onClick type javascript function would then load the option elements 
interactively.  

I have tried this and found some success.  However, the Select box, when clicked, does
not at first show more options.  I require 2 more clicks of the Select box before all my
selections are displayed for me to choose one.  

Is there any way for me to circumvent this?  Might I be able to fire an event that would
simulate these additional clicks?  That seems like a hack of a solution though, and just
means I don't understand what is going on.

Here is the snippet I have been testing:

Thank you one and all.

-----------

<html> 
<script language="javascript"> 
  function fillin(selects, evt)
  {
    if (mytest.selbx.options.length == 1)
    {
      var oOption = document.createElement("OPTION");
      oOption.text = "Creazativity";
      oOption.value = "http://creazativity.typepad.com/blog/";
      mytest.selbx.add(oOption);

      var oOption = document.createElement("OPTION");
      oOption.text = "Knittingfrau";
      oOption.value = "http://knittingfrau.blogspot.com/";
      mytest.selbx.add(oOption);

      var oOption = document.createElement("OPTION");
      oOption.text = "Knitorious";
      oOption.value = "http://knitorious.typepad.com/knitorious/";
      mytest.selbx.add(oOption);
    }
  }

</script> 

<body>
<head> 
<title>Test </title> 
</head>

<form id="mytest">
<table>
<tr><td>Test Drop-Down menu</td></tr>
<tr><td>
<select name=slect1 id="selbx" onmousedown="return fillin(this)"> 
<option value ="http://www.crazyauntpurl.com/" selected>CrazyAuntPurl</option>
</select> 
</td></tr>
</table>
</form>
</body> 
</html> 

Thank you!


More information about the thelist mailing list