Dear Members,

I am struggling with setting value of a dynamic dropdown list object to a value using javascript so that it will show the respective text in the list automatically.

I would try to enumerate the steps for lucidity. Let me know if you need more information.

0. We want to generate two dropdown lists, both get populated using database queries via a php code. That means we just create the select objects and assign them ids (say listOne, and listTwo), which will later be used to populate the lists (i.e., values-text pairs) programmatically using javascript and php.

1. First list is static and never changes in the application once populated. We do this by using formatted "echo" statements in our php code by using something similar to:-

for($i=0; $i<$nrows; $i++) {
echo "<option value=\"".$response[$i]['columnId1']."\">".$response[$i]['columId2']."</option>\n";
}

If you look at the html code of the page now (may be by using "view page source" option from the browser), you will see a list of html option tags under the select tag for this list. The content of the list is exactly the way we want.

2. The second list is dynamic that means it gets created by querying the database each time a value in the listOne gets selected or changes. We append the value-option pair using appendChild() function something like this:-

var select = document.getElementById('listTwo');

for (var i = 1; i<=max; i++){
var opt = document.createElement('option');
opt.value = i;
opt.textElemet = data[i];
select.appendChild(opt);
}
where "data" is an array that we get from querying database.

Since this list is created on the fly, there are no footprints in the html code what so ever about the content of the list. That means you see nothing but an empty select object if you view the html code. However, the content of the list is exactly the way we want. It is just that it is hidden.

3. We are struggling to find a way to set the value of listTwo to a particular "value" once the list is populated. This task is fairly straight forward for any static dropdown list similar to "listOne" using:-

document.getElementById("listOne").value = aValue;

4. How would you do the same for a dynamic dropdown list similar to "listTwo"?

Thanks for your time and suggestions,
gaurav