Select 基于从下拉列表中选择的选项不同的 div

Question

根据下拉列表中的选定选项，我坚持显示搜索栏。

我的 html 有以下组件：

1. 样式：未选中时隐藏；

<style> 

 .form-inline{
      display: none;
  }
</style>

2. 我的选择下拉列表；

<div class="dropdown">
   <select id="searchEngine" class="form-control mr-sm-2" style="background-color:#00FFFF;">
     <option value="Wolfram" >Wolfram</option>
     <option value="Approach Zero">Approach zero</option>
     <option value="Google">Google</option>
   </select>
</div>

3. 然后是我的内容：选择时需要显示的不同 div：

<div class="content">
              <div id="Wolfram" class="form-inline">
                <input class="form-control mr-sm-2" id="search-input1" style="width: 18rem" placeholder="Search Wolfram">
                <button class="btn btn-outline-success" id="search-button1">
                  {% comment %} https://fontawesome.com/v5.15/icons?d=gallery&p=2 {% endcomment %}
                  <i class="fa fa-search"></i>
                </button>
              </div>
              <div id="Approach Zero" class="form-inline">
                <input class="form-control mr-sm-2" id="search-input2" style="width: 18rem" placeholder="Search Approach Zero">
                <button class="btn btn-outline-success" id="search-button2">
                  {% comment %} https://fontawesome.com/v5.15/icons?d=gallery&p=2 {% endcomment %}
                  <i class="fa fa-search"></i>
                </button>
              </div>
              <div id="Google" class="form-inline">
                <input class="form-control mr-sm-2" id="search-input3" style="width: 18rem" placeholder="Search Google">
                <button class="btn btn-outline-success" id="search-button3">
                  {% comment %} https://fontawesome.com/v5.15/icons?d=gallery&p=2 {% endcomment %}
                  <i class="fa fa-search"></i>
                </button>
              </div>
</div>

4. 应该处理逻辑的脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script>
<script>
              $(document).ready(function(){
                $("#searchEngine").on('change', function(){
                  $(".form-inline").hide();
                  $("#" + $(this).val()).fadeIn(700);
                }).change();
              });
</script>

但这似乎不起作用，我不明白为什么。 有人知道出了什么问题吗？

编辑

根据评论，我尝试调整代码，但它仍然不起作用。 所以我期待应该有其他原因。 为此，我将分享我的整个 html 文件。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

<div class="card text-center">
  <div class="card-header">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <style> 
              nav {
              font-family: 'Roboto Mono', monospace;
              }
              .form-inline{
                display: none;
              }
            </style>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="{% url 'cv_index' %}">Home</a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link" href="{% url 'project_index' %}">Projects</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'blog_index' %}">Blog</a>
                </li>
              </ul>
            </div>
            <div class="dropdown">
              <select id="searchEngine" class="form-control mr-sm-2" style="background-color:#00FFFF;">
                <option value="Wolfram" >Wolfram</option>
                <option value="Approach Zero">Approach zero</option>
                <option value="Google">Google</option>
              </select>
            </div>
            <div class="content">
              <div id="Wolfram" class="form-inline">
                <input class="form-control mr-sm-2" id="search-input1" style="width: 18rem" placeholder="Search Wolfram">
                <button class="btn btn-outline-success" id="search-button1">
                  <i class="fa fa-search"></i>
                </button>
              </div>
              <div id="Approach Zero" class="form-inline">
                <input class="form-control mr-sm-2" id="search-input2" style="width: 18rem" placeholder="Search Approach Zero">
                <button class="btn btn-outline-success" id="search-button2">         
                  <i class="fa fa-search"></i>
                </button>
              </div>
              <div id="Google" class="form-inline">
                <input class="form-control mr-sm-2" id="search-input3" style="width: 18rem" placeholder="Search Google">
                <button class="btn btn-outline-success" id="search-button3">
                  <i class="fa fa-search"></i>
                </button>
              </div>
            </div>
            <script>
              $(document).ready(function() {
                $("#searchEngine").on('change', function() {
                  $(".form-inline").hide();
                  $("[id='" + $(this).val() + "']");
                }).change();
              });
            </script>
        </div>
    </nav>
  </div>
</div>
<div class="container">
    {% block page_content %}{% endblock %}
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

利用：

$("[id='" + $(this).val() + "']").fadeIn(700);

代替

$("#" + $(this).val()).fadeIn(700);

原因：ID 包含空格，在这种情况下，您可以使用属性选择器。 在您的代码中，具有 id 'Approach Zero' 的元素被翻译为$("#Approach Zero") ，它完全是一个不同的选择器。

演示： http://jsfiddle.net/lotusgodkk/GCu2D/6052/