如何自动加载功能Javascript

Question

我有这个JavaScript代码

$('select[name="fselect"]').on('change', function() {
  if ($(this).val() == "add") {
    $('.add').show();
  } else {
    $('.blank').show();
    $('.add').hide();
  }
});

$('select[name="selection"]').on('change', function() {

  if ($(this).val() == "project") {
    $('.project').show();
    $('.gallery').hide();
    $('.event').hide();
    $('.vikinglaw').hide();
    $('.btn-project').show();
  } else if ($(this).val() == "galleries") {
    $('.gallery').show();
    $('.project').hide();
    $('.event').hide();
    $('.vikinglaw').hide();
    $('.btn-gallery').show();
  } else if ($(this).val() == "event") {
    $('.event').show();
    $('.gallery').hide();
    $('.project').hide();
    $('.vikinglaw').hide();
    $('.btn-event').show();
  } else if ($(this).val() == "vikinglaw") {
    $('.vikinglaw').show();
    $('.event').hide();
    $('.gallery').hide();
    $('.project').hide();
    $('.btn-vikinglaw').show();
  } else {
    $('.blank').show();
    $('.project').hide();
    $('.gallery').hide();
    $('.event').hide();
    $('.vikinglaw').hide();
    $('.btn-vikinglaw').hide();
    $('.btn-event').hide();
    $('.btn-gallery').hide();
    $('.btn-project').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <label for="sel1">What action do you want?</label>
    <select class="form-control" id="fselect" name="fselect">
      <option name="nocontent" id="nocontent" value="nocontent">Please select action</option>
      <option name="add" id="add" value="add">ADD</option>
      <option name="edup" id="edup" value="edup">EDIT/UPDATE</option>
      <option name="delete" id="delete" value="delete">DELETE</option>
    </select>
  </div>
</div>

<div class="add">
  <div class="row">
    <div class="col-md-12">
      <label for="sel1">What page do you want your article to be posted</label>
      <select class="form-control" id="selection" name="selection">
        <option name="nocontent" id="nocontent" value="nocontent">Please select page</option>
        <option name="project" id="project" value="project">Project</option>
        <option name="gallery" id="gallery" value="galleries">Gallery</option>
        <option name="event" id="event" value="event">Event</option>
        <option name="vikinglaw" id="vikinglaw" value="vikinglaw">Viking Law</option>
      </select>
    </div>
  </div>
</div>

我要在这里做的是先隐藏

$('select[name="selection"]').on('change',function(){

这样，如果我单击

$('select[name="fselect"]').on('change',function(){
if($(this).val() == "add"){
    $('.add').show();
}

$('select[name="selection"]').on('change',function(){将显示。

对不起，如果您不太了解英语，那不是我的母语。我已经这样做了几个小时，但我不知道该怎么做。实际上它已经在工作，但是我首先需要单击add按钮，然后它才能工作。

这里是一张图片，让您可以完全了解我

您可以在图片上看到

在第一次加载的“您要执行什么操作”上，必须隐藏“您要张贴文章的页面”。但是问题在于它没有隐藏

Answer 1

也许只是初步了解页面加载情况。

$(document).ready(function() {
    $('.add').hide();
});

毕竟，当页面加载完成时，选择字段上没有更改以触发用于添加div的隐藏。