javascript - 如何自动加载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 的隐藏。