Title: how insert shortcode into dropdown select option
Last modified: September 24, 2022

---

# how insert shortcode into dropdown select option

 *  Resolved [moshedvir2013](https://wordpress.org/support/users/moshedvir2013/)
 * (@moshedvir2013)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/how-insert-shortcode-into-dropdown-select-option/)
 * Hello to all the experts I’m really weak in HTML so please if possible some help.
   I have two drop-down selected lists. the second one depends on the choice of 
   the first drop-down option chosen. when I choose from the second dropdown selected
   list, –> The text appears below
 * pls, see the code below.
 * my question:
 * When a user selects from a second dropdown selected list it will be shown a picture
   of the vehicle + table with vehicle parameters. Basically, I have templates and
   posts of all the vehicles with pictures and graphs that I can display on the 
   page by using a shortcut. Now I need to insert all the shortcodes inside the 
   dropdown selected list And every time the user selects a vehicle model, it will
   display the data from the shortcode [table id=ID /] + ( [RH ELEMENTOR id=”ID”]
   or [RH post id=”ID”] ) and not the text.
    I have this code as appears below. 
   But I don’t know how to insert the shortcode inside it. Thanks for the help.
 *     ```
       <select id="car" onchange="ChangeCarList()"> 
         <option value="select">-- Car --</option> 
         <option value="VO">VOLVO</option> 
         <option value="VW">Volkswagen</option> 
         <option value="BMW">BMW</option> 
       </select> 
   
       <select id="carmodel" onchange="myFunction()">
       <option value=""> - Select car model - </option> 
       </select> 
   
       <p id="demo">&nbsp;</p>
       <p id="secondP"></p>
       <script>
       var carsAndModels = {};
       carsAndModels['select'] = ['-- carmodel --'];
       carsAndModels['VO'] = ['','V70', 'XC60', 'XC90'];
       carsAndModels['VW'] = ['','Golf', 'Polo', 'Scirocco', 'Touareg'];
       carsAndModels['BMW'] = ['','M6', 'X5', 'Z3'];
   
       function ChangeCarList() {
         var carList = document.getElementById("car");
         var modelList = document.getElementById("carmodel");
         var selCar = carList.options[carList.selectedIndex].value;
         while (modelList.options.length) {
           modelList.remove(0);
         }
         var cars = carsAndModels[selCar];
         if (cars) {
           var i;
           for (i = 0; i < cars.length; i++) {
             var car = new Option(cars[i], i);
             modelList.options.add(car);
           }
         }
       } 
       </script>
   
       <script>
       function myFunction() {
         var x = document.getElementById("carmodel");
         var i = x.selectedIndex;
         document.getElementById("demo").innerHTML = x.options[i].text;
       }
       </script>
       ```
   

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/how-insert-shortcode-into-dropdown-select-option/#post-16040467)
 * Your issue is shortcodes only work server side. Everything you presented is all
   client side. To get shortcode output, you either need to get all of it (every
   possible selection) before the HTML is output server side, or get what you need
   dynamically based on user selection via Ajax techniques.
 * A second dropdown which depends on the selection from the first is known as “
   cascading dropdowns”. You can do a generic search to gain more insight. The Ajax
   examples you might find are likely not WP specific. Any examples are still useful,
   but Ajax in WP has a few quirks you’ll need to accommodate. Check the [Plugin Handbook](https://developer.wordpress.org/plugins/javascript/ajax/)
   for WP specific Ajax techniques (but not specific for cascading dropdowns). You’ll
   need to interpret and adapt any information presented.
 * Server side Ajax handlers will be written in PHP. You can get shortcode expansions
   in PHP with [do_shortcode()](https://developer.wordpress.org/reference/functions/do_shortcode/).
 *  Thread Starter [moshedvir2013](https://wordpress.org/support/users/moshedvir2013/)
 * (@moshedvir2013)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/how-insert-shortcode-into-dropdown-select-option/#post-16040790)
 * I really thank you for the answer
 *  Thread Starter [moshedvir2013](https://wordpress.org/support/users/moshedvir2013/)
 * (@moshedvir2013)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/how-insert-shortcode-into-dropdown-select-option/#post-16040955)
 * thank you

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘how insert shortcode into dropdown select option’ is closed to new replies.

## Tags

 * [html](https://wordpress.org/support/topic-tag/html/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [js](https://wordpress.org/support/topic-tag/js/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 3 participants
 * Last reply from: [moshedvir2013](https://wordpress.org/support/users/moshedvir2013/)
 * Last activity: [3 years, 8 months ago](https://wordpress.org/support/topic/how-insert-shortcode-into-dropdown-select-option/#post-16040955)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics