J'essaie d'afficher l'élément en fonction de l'élément sélectionné dans la boîte, mais je ne peux pas afficher chaque élément séparément dans le code ci-dessous. comment afficher l'élément sélectionné dans un paragraphe par exemple ??

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<form name="property_form">
    <span>
      <select class="select-car" name="the_menu">
      </select>
    </span>
  </form>

<p id="demo"></p> 

<script>
var cars = new Array();
var text = new Array();

cars[0] = "Saab";
tex[0] = "Saab 9-3 Viggen was the jet on wheels of the Swedish brand";

cars[1] = "Fiat";
cars[2] = "BMW";

document.getElementById("demo").innerHTML = cars;

function FillMenuWithArray(myMenu, myArray) {
  // Fills the options of myMenu with the elements of myArray.
  var i;
  myMenu.length = myArray.length;
  for (i = 0; i < myArray.length; i++) {
    myMenu.options[i].text = myArray[i];
  }
}


// This fragment initializes the property dropdown menu using the data defined above in the 
'Data Definitions' section
window.onload = function(e) {
  FillMenuWithArray(document.property_form.the_menu, cars)
}
</script>
</body>
</html>
0
Guilherme 2 oct. 2021 à 20:37

2 réponses

Meilleure réponse

Votre code a eu quelques problèmes, j'ai donc trouvé qu'il était préférable d'écrire ma propre version connexe à partir de laquelle vous pouvez vous référer. Vous pouvez exécuter l'extrait de code ici pour voir si c'est ce que vous recherchez.

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>
0
Dan Zuzevich 2 oct. 2021 à 19:04
const cars = document.querySelector("#cars");
const p = document.querySelector("#demo");

cars.addEventListener('change', function(e){
  const text = e.target.selectedOptions[0].text;
  p.innerHTML = `<span>${text}</span>`;
});
<select id="cars" class="select-car" name="the_menu">
<option>Select car</option>
<option value="1">car 1</option>
<option value="2">car 2</option>
<option value="3">car 3</option>
</select>
      
<p id="demo"></p>
0
navnath 2 oct. 2021 à 18:19