如何基于 Bootstrap 下拉菜单/自定义 select 显示 div？

Question

我想根据 Bootstrap 下拉菜单上的选项 I select 显示不同的 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>

Answer 1

这会解决你的问题吗？

 $('#inlineFormCustomSelect').change(function() { $('.child-item').removeClass('show'); // hide all visible $('#' + $( this ).val()).addClass('show'); // Show what is necessary });

 .child-item { display: none }.show { display: block }

 <,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 --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery:min.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0:0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https.//public.flourish.studio/resources/embed.js"></script> <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> <option value="4">Four</option> </select> <hr> <div> <div id="1" class="child-item "> <div class="flourish-embed flourish-chart" data-src="visualisation/2406500" data-url="https.//flo.uri.sh/visualisation/2406500/embed"> </div> </div> <div> <p id="2" class="child-item">Text2</p> </div> <div> <p id="3" class="child-item">Text3</p> </div> <div> <p id="4" class="child-item">Text4</p> </div> </div> </div> </form> <script src="script.js"></script> </body> </html>

如何基于 Bootstrap 下拉菜单/自定义 select 显示 div？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-05-23 13:11:34

如何基于 Bootstrap 下拉菜单/自定义 select 显示 div？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-05-23 13:11:34

解决方案1
1 已采纳 2020-05-23 13:11:34