 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
// 下面的插件部分建議放在js文件中，　方便調(diào)用 
//-------------- 插件 begin ------------------ 
(function ($) { 
//屏蔽，適合單個(gè)元素. 
$.fn.mask = function () { 
var divHtml = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0)">&nbsp;</div>'; 
$(this).wrap('<span style="position: relative"></span>'); 
$(this).parent().append(divHtml); 
$(this).data("mask","true"); 
} 
//取消屏蔽 
$.fn.unmask = function () { 
$(this).parent().find(".divMask").remove(); 
$(this).unwrap(); 
$(this).data("mask", "false"); 
} 
})(jQuery); 
//-------------- 插件 end ------------------ 
//并沒(méi)有做disabled處理，　只是上面加多了個(gè)屏蔽層，　使之無(wú)法點(diǎn)到而已。 
//這樣其它地方無(wú)須再處理，更方便。 
function changeA2(obj) { 
var t = { 'key': 'b', 'value': '2' };//映射對(duì)應(yīng)關(guān)系 
if (obj.value == t.key) { 
$("#A2").val(t.value); 
$("#A2").mask(); 
} else { 
$("#A2").val(""); 
$("#A2").unmask(); 
} 
} 
</script> 
</head> 
<body> 
<select name="A1" id="A1" onchange="changeA2(this)"> 
<option value="">--請(qǐng)選擇--</option> 
<option value="a">a</option> 
<option value="b">b</option> 
<option value="c">c</option> 
<option value="d">d</option> 
</select> 
<select name="A2" id="A2"> 
<option value="">--請(qǐng)選擇--</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</body> 
</html> 