javascript - 如何查看初始值.Select/Option

Question

我有一个带有选项的选择和一个 js，当我转到代码工作的所有选项时，可以在 id 和值之后隐藏和显示内容。 当我再次选择名称为“品牌名称”的选项时。我什么也没看到。

Here the link to the page

Answer 1

您需要采取一些步骤来解决此问题:

1. 为选项添加值 <option value="showen">Name of the brands</option>

2. 添加新函数toggleContent用于切换内容。

3. 添加toggleContent($("#dropdown").val());到脚本结束。此代码应在页面初始化后显示内容。

$(document).ready(function() {
  function toggleContent(val) {
    $('.loader').fadeIn();
    $(".video").hide();
    $(".showss").hide();
    $("#" + val).hide();
    setTimeout(function() {
      $('.loader').fadeOut();
      $("#" + val).show();
    }, 1500);

  }
  $("#dropdown").change(function() {
    var val = $(this).val();
    toggleContent(val)
  });

  toggleContent($("#dropdown").val());
});

body {
      background-color: #000;
    }
    
    .loader {
      border: 10px solid #fff;
      /* Light grey */
      border-top: 10px solid #3498db;
      /* Blue */
      border-radius: 50%;
      width: 80px;
      height: 80px;
      animation: spin 2s linear infinite;
      position: absolute;
      top: 48%;
      left: 48%;
      display: none;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    @media screen and (max-width: 475px) {
      .loader-video {
        border: 8px solid #fff;
        /* Light grey */
        border-top: 8px solid #3498db;
        /* Blue */
        border-radius: 50%;
        width: 60px;
        height: 60px;
        top: 48%;
        left: 48%;
      }
    }
    
    @media screen and (max-width: 384px) {
      .loader {
        border: 8px solid #fff;
        /* Light grey */
        border-top: 8px solid #3498db;
        /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        top: 48%;
        left: 48%;
      }
    }
    
    @media screen and (max-width: 320px) {
      .loader {
        border: 8px solid #fff;
        /* Light grey */
        border-top: 8px solid #3498db;
        /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        top: 48%;
        left: 48%;
      }
    }

  <div class="container">
    <div class="form-group container">
      <select class="form-control" id="dropdown">
        <option value="showen">Name of the brands</option>
        <option value="carsvideo1">Acura</option>
        <option value="carsvideo2">Abarth</option>
        <option value="carsvideo3">Alfa Romeo</option>
        <option value="carsvideo4">Audi</option>
      </select>
    </div>
  </div>
  <div class="container text-center">
    <div class="loader"></div>
  </div>
  <div class="container">
    <h2 style="color:yellow;" class="showss text-center" id="showen">Main Content</h2>
  </div>
  <!--Hidden Content-->
  <div class="video" id="carsvideo1">
    <div class="container">
      <h2 class="text-center" style="color:red">Acura Video</h2>
    </div>
  </div>
  <div class="video" id="carsvideo2">
    <div class="container">
      <h2 class="text-center" style="color:blue">Abarth Video</h2>
    </div>
  </div>
  <div class="video" id="carsvideo3">
    <div class="container">
      <h2 class="text-center" style="color:green">Alfa Romeo Video</h2>
    </div>
  </div>
  <div class="video" id="carsvideo4">
    <div class="container">
      <h2 class="text-center" style="color:white">Audi Video</h2>
    </div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>