从数组中选择数据并在段落中显示另一个数组中的数据 - javascript答案

【问题标题】：Select data from array and displaying data from another array in a paragraph - javascript从数组中选择数据并在段落中显示另一个数组中的数据 - javascript
【发布时间】：2021-11-23 20:43:21
【问题描述】：

如何在select中选择属性，显示text[0]数组的文本等等，我需要在这段代码中添加这个函数，而不需要改变它。

对不起，我之前问过这个问题，但我无法适应，所以我发布另一个代码

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

【问题讨论】：

所以你想在一个段落中显示选定的汽车？ UpdateUnitMenu 在做什么？分享代码。
忽略这个sn-p，因为这个单位转换器的代码UpdateUnitMenu用for conversion的值更新了两个输入
您是否想在段落中显示所选汽车
是的，当我选择汽车时，或
中会出现一个文本。或者如何在 html 中显示嵌入页面的链接
检查解决方案。我这就是你需要的？

标签： javascript html arrays select onchange

【解决方案1】：

在最后，我设法组合两个解决方案（谢谢贡献）来达到这个结果，在选择选项时，将出现相应的文本，它更类似于上一个代码

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

【讨论】：

【解决方案2】：

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>

【讨论】：

我将使用您的代码作为参考，兄弟非常感谢您的帮助
好的，检查更新的答案以匹配您的功能流程。
兄弟，非常感谢

【解决方案3】：

您的代码出现了一些问题，因此我发现最好编写自己的相关版本以供您参考。您可以在此处运行代码 sn-p 以查看是否是您要查找的内容。

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>

【讨论】：

没错，但我需要显示的不是数组本身的文本，而是关于的文本。比如你的汽车萨博数组，我想显示一个关于汽车的文字
我已更新答案，向您展示如何改为显示每辆车的描述。
对了，我会尽量作为参考，谢谢。如果你也能帮助我适应我的代码