js响应HTML客户端下拉列表的修改事件

这个案例对经常写前端程序的人来讲应该比较简单,不过像我这种习惯于后台开发,对前端不熟悉的人来说,还是有参考意义的。

在asp.net里面,经常需要响应下拉列表DropDownList的SelectedIndexChanged事件。这个在后台来做,比较简单,只需要设置控件的AutoPostBack 属性为true,然后编写相应的后台事件处理代码即可。

但是,这样的实现方式有时候不太合适。因为,每当修改下拉列表的选项都会触发服务器的响应操作。这个在某些情况下是必要的,但在某些情况下却显得多余。比如:用户只是希望修改选项然后再界面上看到不同的显示,这样的情况仍然采用服务器的事件处理程序来处理就显得有些浪费资源。所以,我们可以考虑采用HTML控件再加上runat=“server”属性,保证服务器能读取该控件的值还可以用js读取控件的值。不说了,看案例吧。

下面的案例希望在修改下拉列表的值时把当前选择的项目的值显示在页面上。

 <html>
<head>
<title>test</title>
<script type="text/javascript">
function changeTitle() {
document.getElementById("divTitle").innerHTML = document.getElementById("cars").value;
}
</script>
</head>
<body> <form>
<div id="divTitle" style="border:solid 1px red; width:200px;height:50px;"></div>
<select id="cars" name="cars" onchange="changeTitle();">
<option value="Volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form> </body>
</html>
上一篇:[HeadFirst-HTMLCSS入门][第十章div,span]


下一篇:WEB入门之十二 jquery简介