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>

 

相关文章
|
10月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
12月前
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
229 15
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
549 3
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
602 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
264 24
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
364 2
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
837 5
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
616 1
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
335 3
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
488 0
html5+three.js公路开车小游戏源码
下一篇
开通oss服务