选择列表项后下拉菜单显示其下方的内容，最好的方法是什么？

Question

我需要创建一个简单的下拉菜单，它与一个文本框（例如下方 100 像素）相结合，在选中时应显示与该选项相关的信息。我正在考虑以简单文本显示信息，然后使用 CSS 对其进行自定义。为了达到这个结果，我应该在 Javascript 中创建不同的 classes/variables 还是有办法只用 HTML 和 CSS 来做到这一点？（或者有更好的方法吗？）我什至不知道如何开始。我想我最终必须研究很多 Javascript 才能做到这一点，但是如果您知道任何好的资源，请即使 link 到一个很好的教程也会非常好赞赏！

我对 Javascript 的了解是基本的，如果不是略微超过零的话。

非常感谢您的帮助。

Answer 1

如果您想快速创建它，尽管了解实际情况，您应该尝试使用 Bootstrap, here is a link for an example of what you want to do。

否则，您可以在网上找到多个教程，这些教程将解释如何使用纯 css 或 javascript (example).

来实现类似的目的

Answer 2

我尝试了从问题中得到的内容，如果我理解了其他内容，请纠正我。

你可以写HTML喜欢

<select id="opt">
    <option> NO 1</option>
    <option> NO 2</option>
    <option> NO 3</option>
</select>
<input type="text" id="info" value="No1 info"/>

并且使用jquery你可以获得用户选择的值，然后根据该值显示信息。

$("#opt").change(function(){
    var choice=$(this).val();
   $("#info").val(info(choice));
})
 var info=function(choice){
     var iz ;
     switch(choice){
     case "NO 1":iz="No1 info";
     break;
     case "NO 2":iz="No2 info"
     break;
     case "NO 3":iz="No3 info"
     break;
     }
      return(iz);
   }

选择列表项后下拉菜单显示其下方的内容，最好的方法是什么？

Drop down menu to display content below it once a list item is selected, best way to do it?

html

javascript

drop-down-menu