根据从下拉列表中选择的选项选择不同的 div答案

【问题标题】：Select a different div based on the selected option from a dropdown list根据从下拉列表中选择的选项选择不同的 div
【发布时间】：2021-12-31 16:44:42
【问题描述】：

根据下拉列表中的选定选项，我一直无法显示搜索栏。

我的 html 有以下组件：

样式：未选中时隐藏；

<style> 

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

我的下拉列表；

<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：

<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 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);
                });
              });
</script>

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

编辑

基于cmets，我尝试调整代码并在演示中运行。见下文。但是（！），它在我的 html 中不起作用，但我唯一不同的是在我的 html 文件中运行 javascript。但这由于某种原因不起作用。为什么不呢？？

$(document).ready(function () {
  $("#searchEngine").on('change', function () {
    $(".form-inline").hide();
    $("#" + $(this).val()).fadeIn(700);
  });
 });

<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>
        </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>
<script src="https://code.jquery.com/jquery-3.1.0.js"></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();
                  $("#" + $(this).val()).fadeIn(700);
              });
            });
            </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>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

怎么了？

【问题讨论】：

.on('change', handler) 或 .change(handler) - 选择一个，而不是两个。
一个 id 只能包含一个 word ...它是唯一的。使用 à 类或下划线将 approach zero 设置为单个 word 以便验证 id 值。一旦解决了这个问题，修复它周围的错误应该会容易得多。
@G-Cyrillus 谢谢！我调整了我的帖子。仍然无法弄清楚出了什么问题。
您正在使用不包含动画方法的 jQuery slim 版本。检查浏览器开发工具控制台中的错误
@charlietfl 谢谢！我快到了，除了在我的 html 文件中运行脚本似乎不起作用。这是为什么？有什么不对？虽然 sn-p 演示工作正常：s

标签： javascript html jquery css

【解决方案1】：

用途：

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

而不是

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

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

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

【讨论】：

是否还有其他原因导致我仍然无法使用它？
@Steven01123581321 除非我看到完整的代码，否则不确定。该演示工作正常。
我添加了我的完整代码。演示确实运行良好。
元素 ID 中的空格无效。创建黑客只是掩盖实际问题
@charlietfl 和 @K K 调整了我的帖子。