caok · December 24, 2013 02:32
diff --git a/gistfile1.html b/gistfile1.html
 <!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文件中，　方便调用
        //-------------- 插件 begin ------------------
        (function ($) {
            //屏蔽，适合单个元素.
            $.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)"> </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 ------------------

        //并没有做disabled处理，　只是上面加多了个屏蔽层，　使之无法点到而已。 
        //这样其它地方无须再处理，更方便。
        function changeA2(obj) {
            var t = { 'key': 'b', 'value': '2' };//映射对应关系
            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="">--请选择--</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="">--请选择--</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
 </body>
 </html>
	<!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文件中，　方便调用
	//-------------- 插件 begin ------------------
	(function ($) {
	//屏蔽，适合单个元素.
	$.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)"> </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 ------------------

	//并没有做disabled处理，　只是上面加多了个屏蔽层，　使之无法点到而已。
	//这样其它地方无须再处理，更方便。
	function changeA2(obj) {
	var t = { 'key': 'b', 'value': '2' };//映射对应关系
	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="">--请选择--</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="">--请选择--</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	</select>
	</body>
	</html>