www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to set the value of a dynamic dropdown list

Hybrid View

  1. #1
    Join Date
    Aug 2013
    Posts
    3

    How to set the value of a dynamic dropdown list

    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

  2. #2
    Join Date
    Mar 2011
    Posts
    1,133
    Once the second <select> element has been added to the document, you can set its value in the same way you set the first one. The fact that it is/was dynamically created doesn't matter. It exists as far as the browser is concerned.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2013
    Posts
    3
    Thanks Rick, for the reply.

    Actually, I have tried that but to my surprise it doesn't work. I tried using both DOM object and jQuery:-

    //try 1: simple DOM object way
    //document.getElementById("listTwo").value = aValue;

    // try 2: jQuery way
    $(document).ready(function(){$("#listTwo").val(aValue)});

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    See also this page : Changing Select element content on the fly
    To preserve the server, It can be preferable to build before javascript files with PHP like on this page about local taxes in our 36 682 cities.
    Last edited by 007Julien; 08-05-2013 at 09:25 AM.

  5. #5
    Join Date
    Aug 2013
    Posts
    3
    Thank you, Julien. I will take a look and get back to you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles