how to display table or image with shortcode drop-down list that depends on the selected option in another drop-down list

Moshe Dvir 0
Viewed 38

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:

  1. When a user selects from a list of car models which will be shown below 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 list And every time the user selects a vehicle model, the list will display the data using the shortcode [table id=ID /] + ( [RH ELEMENTOR id="ID"] or [RH post id="ID"] ) and not the text.
  2. When I choose the first option, the table should disappear Many thanks in advance to all the helpers The code below is what I have for now and I don't know what I need to add to get the activity I'm asking for

<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>

jquery javascript html
1 Answers

You can modify those event handler as below:

function ChangeCarList() {
  let carList = document.getElementById("car");
  let modelList = document.getElementById("carmodel");
  let selCar = carList.options[carList.selectedIndex].value;
  while (modelList.options.length) {
    modelList.remove(0);
  }
  let cars = carsAndModels[selCar];
  if (cars) {
    let i;
    for (i = 0; i < cars.length; i++) {
      let car = new Option(cars[i], i);
      modelList.options.add(car);
    }
  }
  document.getElementById("demo").innerHTML ="";
}


function myFunction() {
  let car  = document.getElementById("car");
  let x = document.getElementById("carmodel");
  let i=x.selectedIndex;
  let tableString="<table border=\"1\"><tr><td>Car</td><td>Model</td></tr>";
  tableString+="<tr><td>"+car.value+"</td><td>"+x.options[i].text+"</td></tr>";
  tableString+="</table>";
  document.getElementById("demo").innerHTML = tableString;
}

Is it what you need?

The KNVB0
Related