下拉菜單中的 Select 選項並在同一頁面上顯示有關它的數據

Question

我目前正在學習 html、css、javascript，我正在制作一個簡單的項目，用戶可以從下拉菜單中選擇一個選項。 數組中有一些關於該選項的數據。 我想 output 該數據位於同一頁面上，但位於頁面右側。

我有點卡住了輸出與下拉菜單中的選項相關的數據。 當您 select 從下拉菜單中選擇一個選項時，所有數據都會出現在屏幕上，而我希望每個下拉選項只顯示一條數據，即選擇 Apple 僅顯示 Apple 數據。

目前最好不是 jquery 只是純 javascript。謝謝

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
  <title>Document</title>
  <style>
    .hide{
        display: none;
    }
    .show{
        display:block;
    }
  </style>
</head>
<body>
  <main>
    <article>
      <h1>List</h1>
      <div>
        <select name="food" id="food" onchange="changeVal()">
          <option value=""selected>Select One</option>
          <option value="Apple">Apple</option>
          <option value="Chocolate">Chocolate</option>
          <option value="Banana">Banana</option>
          <option value="All">All Food</option>
        </select>
      </div>
      <div id="chosenFood" class="hide">
        <h1 style = "text-align:center;">Food List</h1>
        <div id="showFoodList"></div>
      </div>
    </article>
  </main>
<script>
  function changeVal()
  {
    var f = document.getElementById("food");
    var chosenFood = f.options[f.selectedIndex].value;
    document.getElementById("chosenFood").value=chosenFood;
    document.getElementById("chosenFood").className="show";
  }
  var foodInfo = [{
    "Name" : "Apple",
    "Colour" : "Green"
  },
  {
    "Name" : "Chocolate",
    "Colour" : "Brown"
  },
  {
    "Name" : "Banana",
    "Colour" : "Yellow"
  }];
  function showFood(info)
  {
    var out="";
    for(var i=0;i<info.length;++i)
    {
      out+='<label>Name: '+info[i].Name +'<br></label>' +
      '<label>Name: '+info[i].Colour +'<br></label><br>'

    }
    document.getElementById("showFoodList").innerHTML=out;
  }
  showFood(foodInfo);
</script>
</body>
</html>

Answer 1

您的問題在這一行：

document.getElementById("chosenFood").value=chosenFood;

div沒有值，但您可以使用屬性innerHTML向 div 添加內容。 無論如何，我假設您希望向內部 div 添加一個新段落，即 id為 showFoodList的段落。

在任何情況下，我都建議使用.addEventListener()將事件處理程序附加到元素。

固定代碼是：

 function changeVal() { var f = document.getElementById("food"); var chosenFood = f.options[f.selectedIndex].value; document.getElementById("showFoodList").innerHTML += '<p>' + chosenFood + '</p>'; document.getElementById("chosenFood").className="show"; }

 .hide{ display: none; }.show{ display:block; } #showFoodList { text-align: center; }

 <main> <article> <h1>List</h1> <div> <select name="food" id="food" onchange="changeVal()"> <option value=""selected>Select One</option> <option value="Apple">Apple</option> <option value="Chocolate">Chocolate</option> <option value="Banana">Banana</option> <option value="All">All Food</option> </select> </div> <div id="chosenFood" class="hide"> <h1 style = "text-align:center;">Food List</h1> <div id="showFoodList"></div> </div> </article> </main>

Answer 2

您的代碼和解釋對我來說似乎很混亂。
需要不同的JS技術，我不知道從哪里開始解釋我的答案。
不要猶豫，問我任何關於它的事情！

第一版

 const foodInfo = [ { Name: 'Apple', Colour: 'Green' }, { Name: 'Chocolate', Colour: 'Brown' }, { Name: 'Banana', Colour: 'Yellow' } ], selectFood = document.getElementById('food-select'), listFood = document.getElementById('food-list'), DomParser = new DOMParser(); function newItem(item) { let newItem = ` <article class="noDisplay" data-ref="${item.Name}"> <label> ${item.Name} </label> <label> ${item.Colour} </label> </article> ` return (DomParser.parseFromString(newItem, 'text/html')).body.firstChild } foodInfo.forEach(item=> { listFood.appendChild(newItem(item)) selectFood.add( new Option(item.Name, item.Name)) }) selectFood.add( new Option('All Food', 'All')) selectFood.querySelector('option').disabled = true const listArticles = listFood.querySelectorAll('article[data-ref]') selectFood.onchange=()=> { let choose = selectFood.value listArticles.forEach(art=> { if (choose==='All' || choose===art.dataset.ref) art.classList.remove('noDisplay') else art.classList.add('noDisplay') }) }

 .noDisplay { display: none;important: } #food-list { display; table: } #food-list article { display; table-row: } #food-list label { display; table-cell: padding. .2em;7em: } #food-list article:first-of-type { font-weight;bold; }

 <h3>List</h3> <select id="food-select" > <option value="" selected >Select One</option> </select> <h3>Food List</h3> <div id="food-list"> <article class=""> <label>Name:</label> <label>Colour:</label> </article> </div>

注意：這個使用DOMParser.parseFromString() ，我發現它更容易在頁面上插入多個 html 行和多個變量。

第二版（帶表格）

要用真實表格替換文章和標簽，這里是代碼。 注意：表格也有 js directs 方法：

 const foodInfo = [ { Name: 'Apple', Colour: 'Green' }, { Name: 'Chocolate', Colour: 'Brown' }, { Name: 'Banana', Colour: 'Yellow' } ], selectFood = document.getElementById('food-select'), listFood_t = document.querySelector('table#food-list tbody'); foodInfo.forEach(item=> { // table listFood elements let row = listFood_t.insertRow() row.dataset.ref = item.Name row.insertCell().textContent = item.Name row.insertCell().textContent = item.Colour // food-select selectFood.add( new Option(item.Name, item.Name)) }) selectFood.add( new Option('All Food', 'All')) // last one... selectFood.querySelector('option').disabled = true const tableArticles = listFood_t.querySelectorAll('tr[data-ref]') tableArticles.forEach(el=>el.className='noDisplay') // none on start... selectFood.onchange=()=> { let choose = selectFood.value tableArticles.forEach(art=> { if (choose==='All' || choose===art.dataset.ref) art.classList.remove('noDisplay') else art.classList.add('noDisplay') }) }

 table { border-collapse: collapse; margin-top: .7em; } caption { font-size: 1.4em; font-weight:bold; } thead { background-color: #add8e6; font-weight:bold; } td { padding: .2em.7em; width: 8em; border: 1px solid grey; } tbody { text-align: right; }.noDisplay { display: none; }

 <h3>List</h3> <select id="food-select" > <option value="" selected >Select One</option> </select> <table id="food-list"> <caption>Food List</caption> <thead> <tr> <td> Name </td> <td> Colour </td> </tr> </thead> <tbody></tbody> </table>

下拉菜單中的 Select 選項並在同一頁面上顯示有關它的數據

問題描述

2 個解決方案

解決方案1
1 2020-09-01 21:01:32

解決方案2
0 已采納 2020-09-01 21:59:39

第一版

第二版（帶表格）

下拉菜單中的 Select 選項並在同一頁面上顯示有關它的數據

問題描述

2 個解決方案

解決方案1 1 2020-09-01 21:01:32

解決方案2 0 已采納 2020-09-01 21:59:39

第一版

第二版（帶表格）

解決方案1
1 2020-09-01 21:01:32

解決方案2
0 已采納 2020-09-01 21:59:39