Javascript 如何基于引导下拉列表/自定义选择显示div？_Javascript_Html_Css_Twitter Bootstrap

Javascript 如何基于引导下拉列表/自定义选择显示div？

javascript html css twitter-bootstrap

Javascript 如何基于引导下拉列表/自定义选择显示div？,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我想根据我在引导下拉菜单上选择的选项显示不同的div。然而，即使看起来很简单，我也找不到一个合适的例子。如果必须更改JS，我应该如何更改它？这是我目前的代码： <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" conte

我想根据我在引导下拉菜单上选择的选项显示不同的div。然而，即使看起来很简单，我也找不到一个合适的例子。如果必须更改JS，我应该如何更改它？这是我目前的代码：

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Homepage</title>
  </head>
  <body>
    <form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <div>
  <p id="1">Text1</p>
</div>
<div>
  <p id="2">Text2</p>
</div>
<div>
  <p id="3">Text3</p>
</div>
<div>
  <p id="4">Text4</p>
</div>
    </div>


  </div>
</form>

</body>
</html>


主页
偏爱
选择
一
二
三
文本1
文本2
文本3
文本4

这能解决您的问题吗

$（'#inlineFormCustomSelect'）。更改（函数（）{
$（'.child item'）.removeClass（'show'）；//隐藏所有可见项
$（'#'+$（this.val（））.addClass（'show'）；//显示所需内容
});
。子项{
显示：无
}
.表演{
显示：块
}

主页
偏爱
选择
一
二
三
四

Text2
Text3
Text4
是的，谢谢！但是如果我尝试嵌入一个自定义图形，比如div中的div:flo.uri.sh/visualization/2406500/embed“>public.flow.studio/resources/embed.js”，我会遇到一个问题，这不应该是一个问题。你有你想要实现的API文档吗？我想没有，我只是想用我创建的图嵌入另一个div！完整的代码在这里：如果您检查代码笔，您可以看到它对选项一（图）不起作用，其他代码在单击时，会在修改代码段后追加一个。看一看您可能希望在解决方案中运行，因为事情可能会被阻止。注意控制台是否有错误