1. 程式人生 > >控制屬性列的展示和隱藏

控制屬性列的展示和隱藏

onclick事件 場景:在頁面有很多屬性列,有的屬性列要根據前面屬性列的取值進行顯示或者隱藏

這種情況下用onclick事件來進行操作,在onclick中寫一個判斷函式,下面的樣例中用的是change事件,通過在選擇下拉框中使用者級別來控制終端號屬性的顯示以及隱藏

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
function change(){
 		var rule_id=$("#rule_id").val();
			if(rule_id==1){
				$("#CusNo").hide();
			}else{
				$("#CusNo").show();
			}
	}
</script>

<div id="ruleType">
			<label ><span class="form_required">*</span>限制級別:</label>
			<div class="col-lg-6">
				<select id="rule_id" name="rule_id" required  onclick="change(this.value);">
					<option value="">--請選擇限制級別--</option>
					<option value="0">商戶級別</option>
					<option value="1">終端級別</option>
				</select>
			</div>
		</div>
<div id="CusNo">
			<label ><span >*</span>終端號:</label>
			<div >
				<input type="text" id="merc_id" name="merc_id" required placeholder="終端號">
			</div>
</div>