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月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
42 0
|
22天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
12 0
|
3天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
19 2
|
1天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
6 1
|
9天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
23 10
|
18天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
24天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
21 1
|
1月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
18 0
|
1月前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
17 0
|
1月前
|
JavaScript 前端开发
JS页面加载事件
JS页面加载事件