Jump to content

How to set the value of a dynamic dropdown list object


gtuli

Recommended Posts

Dear Members,
I am struggling with setting up the value of a dynamic dropdown list object to a given value using javascript so that it will show the respective element text in the list automatically.
I would try to enumerate the steps we are going through 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;
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
Link to comment
Share on other sites

It doesn't matter how the list gets populated, you always set the value the same way. Technically, the correct way to set the value of a select element in Javascript is to set the selectedIndex property to the index of the selected option.

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...