• Resolved moshedvir2013

    (@moshedvir2013)


    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

    (@bcworkz)

    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 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().

    Thread Starter moshedvir2013

    (@moshedvir2013)

    I really thank you for the answer

    Thread Starter moshedvir2013

    (@moshedvir2013)

    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.