Title: Dynamically Add Dropdown Values
Last modified: August 22, 2016

---

# Dynamically Add Dropdown Values

 *  [mannyotr](https://wordpress.org/support/users/mannyotr/)
 * (@mannyotr)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/dynamically-add-dropdown-values/)
 * I currently have a child page with a custom form. The form has two dropdown fields.
   The values on the second dropdown have to be dynamically populated based on the
   selection of the first dropdown.
 * After much research and trials, I have come up with a solution that is ALMOST
   there, but not quite complete.
 * Currently I have this javascript in my header…
 *     ```
       <script>
   
         function removeAllOptions(selectbox)
         {
           var i;
           for(i=selectbox.options.length-1;i>=0;i--)
           {
             selectbox.remove(i);
           }
         }
   
         function addOption(selectbox, value, text )
         {
           var optn = document.createElement("OPTION");
           optn.text = text;
           optn.value = value;
   
           selectbox.options.add(optn);
         }
   
         function SelectCategory(){
   
           removeAllOptions(document.drop_list.category);
           addOption(document.drop_list.category, "", "Category...", "");
   
           if(document.drop_list.Category.value == 'Fruits'){
             addOption(document.drop_list.category,"Mango", "Mango");
             addOption(document.drop_list.category,"Banana", "Banana");
             addOption(document.drop_list.category,"Orange", "Orange");
           }
           if(document.drop_list.Category.value == 'Games'){
             addOption(document.drop_list.category,"Cricket", "Cricket");
             addOption(document.drop_list.category,"Football", "Football");
             addOption(document.drop_list.category,"Polo", "Polo", "");
           }
           if(document.drop_list.Category.value == 'Scripts'){
             addOption(document.drop_list.category,"PHP", "PHP");
             addOption(document.drop_list.category,"ASP", "ASP");
             addOption(document.drop_list.category,"Perl", "Perl");
           }
   
         }
   
       </script>
       ```
   
 * In the content of my child page I have this code to generate the first dropdown:
 *     ```
       <select name="race" onChange="SelectCategory();">
         <option value="Fruits">Fruits</option>";
         <option value="Games">Games</option>";
         <option value="Scripts">Scripts</option>";
       </select>
       ```
   
 * The ‘option’ lines above are actually being generated from a MySQL query call.
   But that is not important here.
 * This is the code for my second dropdown:
 *     ```
       <select id="category" name="category">
         <option value="">Category...</option>
       </select>
       ```
   
 * Right now the code actually works as is. The second dropdown is populated with
   the values in the SelectCategory function based on the value selected on the 
   first dropdown.
 * The problem is that right now the values in the function SelectCategory are hardcoded(
   as you can see). I really need the addOption line values in that function to 
   be generated from a MySQL query that is based on the value selected in the first
   dropdown.
 * So if a user selects ‘Games’, I need to run a query that selects all games. That
   list would then be passed to the function in order to add the list of games to
   the second dropdown.
 * I am having a hard time figuring out how to make that happen.
 * Please help!
 * Manny

Viewing 1 replies (of 1 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/dynamically-add-dropdown-values/#post-5756592)
 * Hi Manny,
 * If the amount of secondary data is not huge, you could simply place all possible
   variations in a dynamically generated array when the page is output, then when
   the first selection occurs, pick the related data out of the array and populate
   the second drop down. Simple javascript not too different than the conditional
   textbox problem.
 * Obviously there comes a point where that becomes too cumbersome. At that point
   you could submit a new page request via javascript where the returned page has
   the user’s selection from the first drop down pre-selected and the second has
   the related data in it. Of course if the user changes the first selection again,
   you have to do a request all over again.
 * Not to mention full page loads just because a drop down changes is kind of ridiculous
   and a bad user experience. Which brings us to AJAX. This is how this sort of 
   thing should be handled. Instead of loading the whole page again, we only load
   the part that changes. There’s a lot of info about on how to do AJAX on the Internet,
   but most of them do not address the technique in WP, which has some critical 
   differences. One reference you can use is here: [https://developer.wordpress.org/plugins/javascript/](https://developer.wordpress.org/plugins/javascript/)
 * The link is just to a landing page, the next 4 pages describe the entire process.
   While it’s possible to do AJAX with javascript alone, it’s rather clunky. You
   really would be better off using jQuery. Using jQuery means you should no longer
   simply output script blocks on the page, you should enqueue your script using
   [wp_enqueue_script()](http://codex.wordpress.org/Function_Reference/wp_enqueue_script).
 * All of this is a lot to digest. You’ve demonstrated good coding aptitude with
   the conditional textbox problem, you can do this. You will find in the end the
   resulting code is not that extensive. It’s just a lot of concepts to grasp.
 * I would suggest you first create some very basic test code for each small element
   so that the possible problems you might introduce is limited. Incrementally add
   more functionality, constantly testing. Once you get full round trip data between
   browser and server, only then should you introduce your actual data.
 * As always, if you get stuck somewhere, we’re here to help, good luck!
 * BC

Viewing 1 replies (of 1 total)

The topic ‘Dynamically Add Dropdown Values’ is closed to new replies.

## Tags

 * [dropdown](https://wordpress.org/support/topic-tag/dropdown/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [MySQL](https://wordpress.org/support/topic-tag/mysql/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 1 reply
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/dynamically-add-dropdown-values/#post-5756592)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics