Dev*_*dra 1 html javascript 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>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()