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:
- Instead of the text I want a table to appear with a shortcode, like –> [table id=ID /] and not the text.
- 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"> </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>