How to select the property in the select, and display the text of the text[0] array and so on, I needed to add this function in this code without changing it.
Sorry, I've asked this question before, but I couldn't adapt, so I'm posting another code
<!DOCTYPE html>
<html>
<script>
var property = new Array();
property[0] = "Acceleration";
property[1] = "Area";
property[2] = "Lenght";
property[3] = "Weigth";
var text = new Array();
text[0] = "Aceleration is the first value of converter";
text[1] = "Area is the second value of converter";
text[2] = "Aceleration is the first value of converter";
text[3] = "Area is the second value of converter";
function FillMenuWithArray(myMenu, myArray) {
var i;
myMenu.length = myArray.length;
for (i = 0; i < myArray.length; i++) {
myMenu.options[i].text = myArray[i];
}
}
window.onload = function(e) {
FillMenuWithArray(document.property_form.the_menu, property)
}
</script>
<body>
<h2>What Can JavaScript Do?</h2>
<form name="property_form">
<span>
<select class="select-property" name="the_menu">
</select>
</span>
</form>
<br>
<br>
<p id="text">Text</p>
</body>
</html>
In the end I managed to combine the two solutions (thanks for the contribution) to reach this result, when selecting the option, a corresponding text appears and it was more similar to the previous code
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<form name="property_form">
<select class="select-car" name="the_menu">
<option value="">Select car</option>
</select>
<p id="demo"></p>
</form>
<script>
const p = document.querySelector("#demo");
var cars = new Array();
var text = new Array();
cars[0] = "Saab";
text[0] = new Array("<option value='/acceleration'></option>");
cars[1] = "fiat";
text[1] = "Fiat9 Viggen brand";
cars[2] = "bmw"
text[2] = "Some people call bmw a beamer";
function AbrirSecao(secao){
window.open(""+secao+"", "_parent");
}
function AbrirSecao(secao) {
let display = document.getElementById('#text')
fetch(secao).then(function(response) {
// The API call was successful!
return response.text();
}).then(function(html) {
// This is the HTML from our response as a text string
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
const element = doc.querySelector('body > *');
display.appendChild(element);
}).catch(function(err) {
// There was an error
console.warn('Something went wrong.', err);
});
}
function FillMenuWithArray(myMenu, myArray) {
// Fills the options of myMenu with the elements of myArray.
myMenu.innerHTML += myArray.map(c => `<option value='${c}'>${c}
</option>`).join('');
}
window.onload = function(e) {
FillMenuWithArray(document.property_form.the_menu, cars);
// when changed on select change in paragraph
document.property_form.the_menu.addEventListener('change', function(e)
{
const ptext = text[e.target.selectedIndex-1] ?? '';
p.innerHTML = `<span>${ptext}</span>`;
});
}
</script>
</body>
</html>
const p = document.querySelector("#demo");
var cars = new Array();
cars.push("Saab", "Fiat", "BMW");
var text = new Array();
text[0] = "Saab 9-3 Viggen was the jet on wheels of the Swedish brand";
text[1] = "Fiat9 Viggen brand";
function FillMenuWithArray(myMenu, myArray) {
// Fills the options of myMenu with the elements of myArray.
myMenu.innerHTML += myArray.map(c => `<option value='${c}'>${c}</option>`).join('');
}
window.onload = function(e) {
FillMenuWithArray(document.property_form.the_menu, cars);
// when changed on select change in paragraph
document.property_form.the_menu.addEventListener('change', function(e){
const ptext = text[e.target.selectedIndex-1] ?? '';
p.innerHTML = `<span>${ptext}</span>`;
});
}<form name="property_form">
<select class="select-car" name="the_menu">
<option value="">Select car</option>
</select>
<p id="demo"></p>
</form>Your code had a few issues going on, so I found it best to write my own related version that you can reference from. You can run the code snippet here to see if that is what you are looking for.
var cars = {
Saab: "This is a Saab.",
Fiat: "I love Fiat.",
BMW: "Some people call BMW's a beamer."
}
var select = document.querySelector(".select-car");
var p = document.querySelector("p#demo");
Object.keys(cars).forEach(car => {
const option = document.createElement("option");
option.value = car;
option.append(car);
select.append(option);
})
select.onchange = function () {
p.innerText = cars[select.options[select.selectedIndex].value] || "";
};<h2>JavaScript Arrays</h2>
<form name="property_form">
<span>
<select class="select-car" name="the_menu">
<option value="">Choose Car</option>
</select>
</span>
</form>
<p id="demo"></p>