如何根据Bootstrap下拉菜单/自定义选择显示div?

我想根据在Bootstrap下拉菜单中选择的选项显示不同的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>
评论
wquod
wquod

这样可以解决您的问题吗?

$('#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="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>
                    <option value="4">Four</option>
                </select>
                <hr>
                <div>
                    <p id="1" class="child-item">Text1</p>
                </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>

</body>

</html>
点赞
评论