Select data from array and displaying data from another array in a paragraph

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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] = "Saab 9-3 Viggen was the jet on wheels of the Swedish brand";

cars[1] = "fiat";
text[1] = "Fiat9 Viggen  brand";

cars[2] = "bmw"
text[2] = "Some people call bmw a beamer";


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>