关键代码:
$("#formstylecontrols select").change(function(){
alert($(this).attr("id")+" "+$(this).val());
$("p").css($(this).attr("id"),$(this).val());
//这里用了一个技巧:把select的ID和要设置的CSS属性值一致 , 就可以一个语句实现三个select的功能
});
程序代码
<script type="text/javascript">
$(document).ready(function() {
$("#formstylecontrols select").change(function(){
alert($(this).attr("id")+" "+$(this).val());
$("p").css($(this).attr("id"),$(this).val());
//这里用了一个技巧:把select的ID和要设置的CSS属性值一致 , 就可以一个语句实现三个select的功能
});
});
</script>
</head>
<body>
<div id="formstylecontrols">
<label for="font-size">字体大小</label>
<select id="font-size">
<option value="12px">小号</option>
<option value="14px">较小</option>
<option value="16px" >中号</option>
<option value="18px">较大</option>
<option value="24px">大号</option>
</select>
<label for="background">背景颜色</label>
<select id="background">
<option value="#F4FBFF">默认</option>
<option value="#f0f0f0">淡灰</option>
<option value="#eaeaea">灰色</option>
<option value="#eefaee">绿色</option>
<option value="#ffffed">明黄</option>
</select>
<label for="color">字体颜色</label>
<select id="color">
<option value="#000000">黑色</option>
<option value="#ff0000">红色</option>
<option value="#006600">绿色</option>
<option value="#0000ff">蓝色</option>
<option value="#660000">棕色</option>
</select>
<label>
<input type="submit" id="style" value="保存设置" />
</label>
</div>