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

简介: 这个案例对经常写前端程序的人来讲应该比较简单,不过像我这种习惯于后台开发,对前端不熟悉的人来说,还是有参考意义的。   在asp.net里面,经常需要响应下拉列表DropDownList的SelectedIndexChanged事件。

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

 

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

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

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

 1 <html>
 2 <head>
 3 <title>test</title>
 4 <script type="text/javascript">
 5         function changeTitle() {
 6             document.getElementById("divTitle").innerHTML = document.getElementById("cars").value;
 7         }
 8     </script>
 9 </head>
10 <body>
11 
12 <form>
13 <div id="divTitle" style="border:solid 1px red; width:200px;height:50px;"></div>
14 <select id="cars" name="cars" onchange="changeTitle();">
15     <option value="Volvo">Volvo</option>
16     <option value="saab">Saab</option>
17     <option value="fiat" selected="selected">Fiat</option>
18     <option value="audi">Audi</option>
19 </select>
20 </form>
21 
22 </body>
23 </html>

 

相关文章
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
30 2
|
1天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
8 3
|
4天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
12 4
|
3天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
16 0
html5+three.js公路开车小游戏源码
|
12天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
62 6
|
20天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
40 6
|
26天前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
78 1
|
23天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
63 0
|
27天前
|
JavaScript 前端开发
JavaScript 与 HTML 的结合
JavaScript 与 HTML 的结合
15 0