stackoom
  简体   繁体   中英

I want to hide all the field when page load in jquery

 原文  2016-07-28 05:52:35  1   9    javascript/ jquery/ html

Question

I have an scenario where i show and hide fields based on the selected value from drop down.

Its working perfect but when it's loading first time, at that time it shows all the fields value.

So i want to hide all the value when page load. 

 jQuery(document).ready(function($) { $('select[name=mem_type]').change(function() { // hide all optional elements $('.common-subject').hide(); $('.maths-subject').hide(); $('.biology-subject').hide(); $('.pro-member-type').hide(); $("select[name=mem_type] option:selected").each(function() { var value = $(this).val(); if (value == " ") { $('.common-subject').hide(); } else if (value == "Biology") { $('.biology-subject').show(); } else if (value == "Maths") { $('.maths-subject').show(); } }); }); }); 
 <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> <div id="reg_mem_type" class="form-row form-row-wide"> <label for="reg_mem_type">Subject Type</label> <select id="reg_mem_type" name="mem_type"> <option value=" "></option> <option value="Biology">Biology</option> <option value="Maths">Maths</option> </select> </div> <div class="common-subject biology-subject form-row form-row-wide"> <h2>Biology</h2> </div> <div class="common-subject biology-subject form-row form-row-wide"> <label for="reg_first_name">Biology</label> <input type="text" class="input-text" name="maths" id="reg_first_name" size="10" /> </div> <div class="common-subject biology-subject form-row form-row-wide"> <label for="reg_last_name">Biology1</label> <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" /> </div> <div class="maths-subject common-subject form-row form-row-wide"> <h2>Maths</h2> </div> <div class="common-subject maths-subject form-row form-row-wide"> <label for="reg_website">Maths1</label> <input type="text" class="input-text" name="website" id="reg_website" /> </div> <div class="maths-subject common-subject form-row form-row-wide"> <label for="reg_fax">Maths2</label> <input type="text" class="input-text" name="fax_num" id="reg_fax" /> </div> </head>

9 answers

solution1
 3 ACCPTED  2016-07-28 05:55:14

 jQuery(document).ready(function($) { $('select[name=mem_type]').change(function() { // hide all optional elements $('.common-subject').hide(); $('.maths-subject').hide(); $('.biology-subject').hide(); $('.pro-member-type').hide(); $("select[name=mem_type] option:selected").each(function() { var value = $(this).val(); if (value == " ") { $('.common-subject').hide(); } else if (value == "Biology") { $('.biology-subject').show(); } else if (value == "Maths") { $('.maths-subject').show(); } }); }).change();//manually call change event so that on load it run the change event }); 
 <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> <div id="reg_mem_type" class="form-row form-row-wide"> <label for="reg_mem_type">Subject Type</label> <select id="reg_mem_type" name="mem_type"> <option value=" "></option> <option value="Biology">Biology</option> <option value="Maths">Maths</option> </select> </div> <div class="common-subject biology-subject form-row form-row-wide"> <h2>Biology</h2> </div> <div class="common-subject biology-subject form-row form-row-wide"> <label for="reg_first_name">Biology</label> <input type="text" class="input-text" name="maths" id="reg_first_name" size="10" /> </div> <div class="common-subject biology-subject form-row form-row-wide"> <label for="reg_last_name">Biology1</label> <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" /> </div> <div class="maths-subject common-subject form-row form-row-wide"> <h2>Maths</h2> </div> <div class="common-subject maths-subject form-row form-row-wide"> <label for="reg_website">Maths1</label> <input type="text" class="input-text" name="website" id="reg_website" /> </div> <div class="maths-subject common-subject form-row form-row-wide"> <label for="reg_fax">Maths2</label> <input type="text" class="input-text" name="fax_num" id="reg_fax" /> </div> </head>

Call .change()

solution2
 2  2016-07-28 05:55:30

just trigger change event on page load: 

 $('select[name=mem_type]').change(function() { // hide all optional elements $('.common-subject').hide(); $('.maths-subject').hide(); $('.biology-subject').hide(); $('.pro-member-type').hide(); $("select[name=mem_type] option:selected").each(function() { var value = $(this).val(); if (value == " ") { $('.common-subject').hide(); } else if (value == "Biology") { $('.biology-subject').show(); } else if (value == "Maths") { $('.maths-subject').show(); } }); }); $('select[name=mem_type]').change(); // just trigger change event here 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="reg_mem_type" class="form-row form-row-wide"> <label for="reg_mem_type">Subject Type</label> <select id="reg_mem_type" name="mem_type"> <option value=" "></option> <option value="Biology">Biology</option> <option value="Maths">Maths</option> </select> </div> <div class="common-subject biology-subject form-row form-row-wide"> <h2>Biology</h2> </div> <div class="common-subject biology-subject form-row form-row-wide"> <label for="reg_first_name">Biology</label> <input type="text" class="input-text" name="maths" id="reg_first_name" size="10" /> </div> <div class="common-subject biology-subject form-row form-row-wide"> <label for="reg_last_name">Biology1</label> <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" /> </div> <div class="maths-subject common-subject form-row form-row-wide"> <h2>Maths</h2> </div> <div class="common-subject maths-subject form-row form-row-wide"> <label for="reg_website">Maths1</label> <input type="text" class="input-text" name="website" id="reg_website" /> </div> <div class="maths-subject common-subject form-row form-row-wide"> <label for="reg_fax">Maths2</label> <input type="text" class="input-text" name="fax_num" id="reg_fax" /> </div>

solution3
 1  2016-07-28 05:56:31

Just add this to your code : 

    <style>
    .common-subject{
       display:none;
    }
    </style>

And the rest of you code will work fine then.

solution4
 1  2016-07-28 05:57:20

您还可以触发变更事件 

$('select[name=mem_type]').trigger('change');

solution5
 1  2016-07-28 05:58:18

只需将此行作为更改事件功能之前的就绪功能的第一行

$('.common-subject').hide();

solution6
 1  2016-07-28 06:00:54

All you need to do is to set a class in your css for instance .dNone{display:none} and then add this class to the fields or elements you want to hide.

Once you select something from you drop down menu just remove .dNone from those elements :)

solution7
 1  2016-07-28 06:03:39

Try this code 

  jQuery(document).ready(function($){ $('.common-subject').hide(); $('.maths-subject').hide(); $('.biology-subject').hide(); $('.pro-member-type').hide(); $('select[name=mem_type]').change(function () { // hide all optional elements $('.common-subject').hide(); $('.maths-subject').hide(); $('.biology-subject').hide(); $('.pro-member-type').hide(); $("select[name=mem_type] option:selected").each(function () { var value = $(this).val(); if(value == " ") { $('.common-subject').hide(); } else if(value == "Biology") { $('.biology-subject').show(); } else if(value == "Maths") { $('.maths-subject').show(); } }); }); }); 
 <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> <div id="reg_mem_type" class="form-row form-row-wide"> <label for="reg_mem_type">Subject Type </label> <select id="reg_mem_type" name="mem_type"> <option value=" "> </option> <option value="Biology">Biology</option> <option value="Maths">Maths</option> </select> </div> <div class="common-subject biology-subject form-row form-row-wide"> <h2>Biology</h2></div> <div class="common-subject biology-subject form-row form-row-wide"> <label for="reg_first_name">Biology</label> <input type="text" class="input-text" name="maths" id="reg_first_name" size="10"/> </div> <div class="common-subject biology-subject form-row form-row-wide"> <label for="reg_last_name">Biology1</label> <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10"/> </div> <div class="maths-subject common-subject form-row form-row-wide"> <h2>Maths</h2> </div> <div class="common-subject maths-subject form-row form-row-wide"> <label for="reg_website">Maths1</label> <input type="text" class="input-text" name="website" id="reg_website"/> </div> <div class="maths-subject common-subject form-row form-row-wide"> <label for="reg_fax">Maths2</label> <input type="text" class="input-text" name="fax_num" id="reg_fax"/> </div> </head>

solution8
 1  2016-07-28 06:07:38

better wrap all your html in one parent div and give a class say( parent_class ). and then give css to that class 

display:none;

Then on window load show that class 

$(window).load(function(){

$(".parent_class").show();

})

solution9
 1  2016-07-28 06:10:29

Put elements you want to hide on load event instead of putting it inside change event. So that on load it will hide all optional elements, then on change event show the elements you want. 

jQuery(document).ready(function($) {

   // hide all optional elements
    $('.common-subject').hide();
    $('.maths-subject').hide();
    $('.biology-subject').hide();
    $('.pro-member-type').hide();

  // Now the change event.
   $("select[name=mem_type] option:selected").each(function() {
       var value = $(this).val();
       if (value == " ") {
          $('.common-subject').hide();
       } 
       else if (value == "Biology") {
          $('.biology-subject').show();
       } else if (value == "Maths") {
          $('.maths-subject').show();
       }
   });
});

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question when using .load() I get all the divs from the external page but I only want one div to load Want button to hide content on page load then display when button clicked JS/jQuery Show DIV when page load and Hide when click hide all divs on page load I want to hide user's name and age when page is open using jquery i want the a div to hide when the input is empty? I have created a counter throught jQuery but is start working as soon as i load the page i want to execute it when the section appear on screen hide div when page load I want to stop the preloader. When the page loads, I want it should hide How to make page fullscreen on load or when I want
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM