在选择某些项目时显示文本和列表的功能

小提琴

您需要包装要显示和隐藏的元素，然后就像检查选择了哪个值并切换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';
  }
}

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

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

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

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

祝你好运！