1. 首页
  2. 问答
  3. 我想在jquery中加载页面时隐藏所有字段

我想在jquery中加载页面时隐藏所有字段

2016-07-28 86 views
2

我有一个场景，我根据从下拉列表中选择的值显示和隐藏字段。我想在jquery中加载页面时隐藏所有字段

它的工作非常完美，但是当它第一次加载时，它显示了所有的字段值。

所以我想隐藏页面加载时的所有值。

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>

来源

2016-07-28 roman reign

+3

也许，最简单的解决方法是将所有字段设置为默认隐藏，并在需要时显示**。 – FDavidov

+0

感谢@FDavidov的建议。 –

回答

2 

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>

呼叫.change()

来源

2016-07-28 05:55:14 guradio

+0

感谢@guradio它的完美工作。 –

+0

@devodedra很高兴它的作品队友:)快乐编码 – guradio

1

只是触发页面负载变化：

$('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>

来源

2016-07-28 05:55:30

+0

谢谢。其alos工作完美。 –

0

只需添加到您的代码：

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

和你代码的其余部分将正常工作即可。

来源

2016-07-28 05:56:31 Aslam

0

您也可以触发更改事件

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

来源

2016-07-28 05:57:20

0

只要穿上这条线之前改变事件功能在准备功能第一线

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

来源

2016-07-28 05:58:18

0

所有你需要做的是设置一个类在你的CSS例如.dNone {display：none}，然后将这个类添加到你想隐藏的字段或元素。

一旦你从下拉菜单中选择一些刚刚从这些元素:)

来源

2016-07-28 06:00:54

0

删除.dNone试一下这个代码

\t 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>

来源

2016-07-28 06:03:39

0

更好的包装所有的HTML在一个父div并给一个班级说（parent_class）。然后给CSS的那类

display:none;

然后在窗口中加载显示，类，你要隐藏的负载事件，而不是把它改变事件中

$(window).load(function(){ 

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

})

来源

2016-07-28 06:07:38

0

看跌因素。因此，在加载时它将隐藏所有可选元素，然后在更改事件中显示您想要的元素。

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(); 
     } 
    }); 
});

来源

2016-07-28 06:10:29

相关问题

 相关问题