Question

我有两个食谱，我试图只在从下拉菜单中选择相关选项时才显示它们。我有配方和下拉菜单的代码，但我不知道如何链接这两个但不使用jQuery或任何其他外部库。感谢

<select id="myList" onchange="favsports()">
<option> Macaroni Cheese</option>
<option> Mushroom and Spinach Lasagne</option>
</select>

<div id="rec">
<p> Macaroni Cheese </p>
<p> Ingredients </p>
<ul>
  <li>175g Pasta</li>
  <li>50g Butter</li>
  <li>50g Plain Flour</li>
  <li>400ml Semi-skimmed Milk</li>
  <li>175g Cheese</li>
</ul>  

<p> Method </p>
<ol>
  <li>Pre-heat the oven to 180ºC</li>
  <li>Cook the pasta </li>
  <li>In a different pan melt the butter</li>
  <li>Add the flour and cook for onw minute on the hest</li>
  <li>Take off the heat and add the milk, a little at a time</li>
  <li>Retur to the heat and bring to the boil, stirring the whole time</li>
  <li>Once bubbles appear, add the cheese and stir it all in until its melted</li>
  <li>Season to taste </li>
  <li>Mix together with the pasta and bake in the oven for 20 minutes</li>
</ol>  


<p> Mushroom and Spinach Lasagne </p>
<p> Ingredients </p>
<ul>
  <li>1 tbsp Olive Oil</li>
  <li>1 Garlic Clove</li>
  <li>250g Mushrooms</li>
  <li>1 tsp Thyme Leaves, chopped</li>
  <li>200g Bag of Spinach</li>
  <li>300g Tub of Light Soft Cheese</li>
  <li>4 tbsp Grated Parmesan</li>
  <li>6 Fresh Lasagne Sheets</li>
</ul>  

<p> Method </p>
<ol>
  <li>Heat oven to 180ºC</li> 
  <li>Heat the oil in a large frying pan, add the garlic and cook for 1 min. </li>
  <li>Add the mushrooms and thyme, then cook for 3 mins until they start to soften.</li> 
  <li>Throw in the spinach and stir until the heat of the pan wilts the leaves. </li>
  <li>Remove from the heat and stir in the soft cheese, 1 tbsp of the Parmesan and some seasoning.</li>
  <li>Put a quarter of the spinach mix on the bottom of a medium-sized baking dish, lay 2 pasta sheets on top, then repeat until you have used all the pasta.</li> 
  <li>Finish with the final quarter of the spinach mix and sprinkle over the rest of the Parmesan</li>
  <li>Bake for 35 mins until golden and the pasta is tender.</li>
</ol> 
</div>

Answer 1

我不打算为你做任务。然而，一个起点是除了当前的html之外还需要使用javascript。此外，您需要将value属性添加到选项标记：

<select id="myList" onchange="favsports()">
<option value="mac"> Macaroni Cheese</option>
<option value="lasagne"> Mushroom and Spinach Lasagne</option>
</select>

然后你需要创建一个javascript函数，就像你在问题中列出的“favsports（）”一样。在该函数内部，您需要弄清楚如何判断选择了哪个选项，并且您需要将每个配方包装在其自己的<div>标记中，以便您可以适当地显示/隐藏它们。

古德勒克！

Answer 2

Fiddle

你需要包装你想要显示和隐藏的元素，然后就像检查选择了什么值并切换css一样简单..

代码：

<select id="myList" onchange="recipe()">
<option></option>
<option> Macaroni Cheese</option>
<option> Mushroom and Spinach Lasagne</option>
</select>

<div id="rec">
<div id="macandchee">
<p> Macaroni Cheese </p>
<p> Ingredients </p>
<ul>
  <li>175g Pasta</li>
  <li>50g Butter</li>
  <li>50g Plain Flour</li>
  <li>400ml Semi-skimmed Milk</li>
  <li>175g Cheese</li>
</ul>  

<p> Method </p>
<ol>
  <li>Pre-heat the oven to 180ºC</li>
  <li>Cook the pasta </li>
  <li>In a different pan melt the butter</li>
  <li>Add the flour and cook for onw minute on the hest</li>
  <li>Take off the heat and add the milk, a little at a time</li>
  <li>Retur to the heat and bring to the boil, stirring the whole time</li>
  <li>Once bubbles appear, add the cheese and stir it all in until its melted</li>
  <li>Season to taste </li>
  <li>Mix together with the pasta and bake in the oven for 20 minutes</li>
</ol>  

</div>

<div id="shroomsandspinach">
  <p> Mushroom and Spinach Lasagne </p>
  <p> Ingredients </p>
  <ul>
    <li>1 tbsp Olive Oil</li>
    <li>1 Garlic Clove</li>
    <li>250g Mushrooms</li>
    <li>1 tsp Thyme Leaves, chopped</li>
    <li>200g Bag of Spinach</li>
    <li>300g Tub of Light Soft Cheese</li>
    <li>4 tbsp Grated Parmesan</li>
    <li>6 Fresh Lasagne Sheets</li>
  </ul>  

  <p> Method </p>
  <ol>
    <li>Heat oven to 180ºC</li> 
    <li>Heat the oil in a large frying pan, add the garlic and cook for 1 min. </li>
    <li>Add the mushrooms and thyme, then cook for 3 mins until they start to soften.</li> 
    <li>Throw in the spinach and stir until the heat of the pan wilts the leaves. </li>
    <li>Remove from the heat and stir in the soft cheese, 1 tbsp of the Parmesan and some seasoning.</li>
    <li>Put a quarter of the spinach mix on the bottom of a medium-sized baking dish, lay 2 pasta sheets on top, then repeat until you have used all the pasta.</li> 
    <li>Finish with the final quarter of the spinach mix and sprinkle over the rest of the Parmesan</li>
    <li>Bake for 35 mins until golden and the pasta is tender.</li>
  </ol> 
  </div>
</div>

JS：

var recipe = function(){
    var e = document.getElementById("myList");
    var rec = e.options[e.selectedIndex].value;
  console.log(rec);
  if(rec == "Mushroom and Spinach Lasagne"){
    document.getElementById("shroomsandspinach").style.display = 'block';
    document.getElementById("macandchee").style.display = 'none';
  }
  if(rec == "Macaroni Cheese"){
    document.getElementById("macandchee").style.display = 'block';
    document.getElementById("shroomsandspinach").style.display = 'none';
  }
  if(rec == ""){
    document.getElementById("macandchee").style.display = 'none';
    document.getElementById("shroomsandspinach").style.display = 'none';
  }
}

这肯定是一个更优雅的解决方案，但这应该让你开始。

选择特定项目时显示文本和列表的功能

2 个答案: