下拉列表框onchange事件

最新推荐文章于 2024-07-07 23:10:31 发布
最新推荐文章于 2024-07-07 23:10:31 发布
阅读量392 收藏
点赞数
分类专栏： html+css javascript DOM 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hatalhcz/article/details/83984239
版权
javascript 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
html+css
16 篇文章 0 订阅
订阅专栏
DOM
15 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
#cssid{
	height:100px;
	width:300px;
	background-color:#FFCC00;
	}
#textid{
	background-color:#CCCCCC;
	width:300px;
	}
</style>
<script type="text/javascript" src="../Day26/doctool.js"></script>
<script type="text/javascript">
function change()
{
	var selNode = byId("selid");
	
	var value = selNode.options[selNode.selectedIndex].value;
	
	//alert(value);
	var divNode1 = byId("cssid");
	var divNode2 = byId("textid");
	
	divNode1.style.textTransform = value;
	divNode2.innerText = "text-transform : "+value+";";
}
</script>
</head>

<body>

<div id="cssid">
	Good good study,Day day up!
</div>
<p>
</p>
<select id="selid" οnchange="change()">
	<option value="none">--text-transform--</option>
    <option value="capitalize">首字母大写</option>
    <option value="uppercase">所有字母大写</option>
    <option value="lowercase">所有字母小写</option>
</select>
<p></p>
<div id="textid">
	text-transform : none;
</div>
</body>
</html>

 

hatalhcz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui 下拉列表的change事件
尼古拉斯鹏
03-29 3万+
layui下拉列表的事件不能用jq的change 应该用自带的方式写默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。如：&lt;select lay-filter="test"&gt;&lt;/select&gt;监听select下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：注意：form.render('select')...
下拉框改变事件
weixin_44543433的博客
06-27 1万+
做项目的基本素养那就是完完全全按照客户的需求完成任务，身为一名开发人员，不仅要实现各种各样的app功能，还要学会变通，不仅需要将代码简化，更要使功能完善化，使用便捷化。当然，短期时间是不可能训练成为这样专业又有高级职业素养的程序员，所以呢，凡是重在积累，人的语言能力并不是天生就有的，而是通过一朝一夕，耳濡目染，反复使用，才能训练出一定的能力。言归正传，既然要一点一滴积累，那就从基础开始学习。一开始...
下拉框的触发事件分析（onchange、onfocus、onclick）
zhanghuan0303的博客
04-23 1万+
select的onChange事件问题解决（onchange、onfocus、onclick、onmousedown） 一、onChange事件只有在值改变时才可触发，所以必须在每一次选择时（尤其第一次）保证选择的值是改变的！ 所以 selected>个人//在这要选定一个默认的值 “selected” 单位 这样在选择第二个时，值就会变即可触发onChang
下拉框练习，使用onchange事件
ZPD_zpd的博客
12-01 1366
onchange 事件会在域的内容改变时发生。 <body> <select name="" id="s1"> <option value="">请选择省份/直辖市</option> <option value="河北">河北省</option> <option value="山东">山东省</option> <option value="天津">天津市</option&gt
Select下拉框onchange事件获取option的value值
热门推荐
君醉酒的博客
10-11 10万+
请选择主类别 1 2 show_sub的JS方法： function show_sub(v){ alert(v); }
下拉列表的onchange事件
zixiao_YING的专栏
12-13 8573
昨天调了半天的前台界面，最后终于实现了想要的下拉列表值变化，跳转action效果。错误原因为：1.将" onchange="goUrl(2)"写成" onchange="goUrl(2);"导致JS行为不执行；2.在函数中获取值时，将var navId = document.getElementById("navId").value; 写成var navId = document.getEleme
下拉框的onchange事件的用法
明天会更好DI的专栏
02-12 2万+
我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件.... 掌握了它的特性后,相应的解决办法也很简单. 请选择 Item 1 Item 2 Item 3 function bao(s) { txt.value+=s; //选择后
可选择和输入的下拉列表框示例
09-04
在网页设计和开发中，创建一个既可选择又可输入的下拉列表框可以提供用户更灵活的交互体验。这样的设计允许用户在预设的选项中选择，同时也可以自定义输入他们自己的值。这种功能通常用于那些可能有固定选项但又允许...
Axure RP 8 带滚动条带筛选的下拉列表框 圆角文本框
01-25
在UI设计中，下拉列表框是一种常用的输入控件，它允许用户从预定义的一组选项中进行选择，通常用于节省屏幕空间和提供更整洁的界面。当选项过多时，会显示滚动条以便用户浏览所有选项。 "带滚动条"的下拉列表框意味...
C#实现无限级联下拉列表框
09-02
在C#中实现无限级联下拉列表框是一种常见的需求，尤其在构建具有层次结构的数据展示界面时。这种功能允许用户在选择一个选项后，下拉列表会动态更新以显示与之前选择相关的下级选项，形成一个连续的联动效果。在本例...
多選下拉列表框
05-02
在IT领域，多选下拉列表框是一种常见的用户界面组件，它允许用户在下拉菜单中选择一个或多个选项。这种交互方式广泛应用于各种应用程序，如网页表单、桌面软件和移动应用，以提高用户体验并优化屏幕空间。下面将详细...
javascript获取下拉列表框当中的文本值示例代码
12-12
近日碰到一个问题，就是需要将用户点击下拉列表当中某个选项后，将其所选的内容保存起来，例如下面的HTML代码： 代码如下: <select onchange=”isSelected(this.value);” id=”city”> ”1″>北京</option> ...
【JQuery】下拉列表框的change事件
O(∩_∩)O
04-02 2万+
当一个元素的值发生变化时，将会触发change事件。 例如在选择下拉列表框中的选项时，就会触change事件。 其实很好理解，但是我在写程序的过程中，却发现了另外的问题。 下拉列表的change事件 葡萄 苹果 荔枝 香焦
WEB前端 -- 下拉框的触发事件分析（onchange、onfocus、onclick）
叶的博客
03-05 2万+
select的onChange事件问题解决 （onchange、onfocus、onclick、onmousedown）一、onChange事件只有在值改变时才可触发，所以必须在每一次选择时（尤其第一次）保证选择的值是改变的！所以&lt;select name="inv_payee" id="ECS_INVPAYEE" onchange="show_payee();" style="border:...
个人js学习实例-下拉菜单onchange
luckybuling
08-16 2372
html： &lt;select name="" id="demo"&gt; &lt;option value="01"&gt;吉祥01&lt;/option&gt; &lt;option value="02"&gt;吉祥02&lt;/option&gt; &lt;option value="03"&amp
第二章-在HTML中使用JavaScript
最新发布
2301_79858637的博客
07-07 797
事实上，WEB的核心语言是HTML，如何做到让JavaScript既可以与HTML页面共存，又不影响页面在其他浏览器中的呈现效果呢？要为WEB浏览器提供核心的脚本支持.
onchange事件的用法
06-08
onchange是一个HTML DOM事件，在用户改变HTML元素的值时触发。它通常用于表单元素，如input、select和textarea等。当元素的值发生变化时，onchange事件会触发一个函数，从而可以执行一些操作。 例如，当用户选择下拉列表中的一个选项时，可以使用onchange事件来执行特定的操作。以下是一个使用onchange事件的示例： ```html <select onchange="myFunction()"> <option value="apple">Apple</option> <option value="orange">Orange</option> <option value="banana">Banana</option> </select> <script> function myFunction() { var x = document.getElementById("mySelect").value; alert("You selected: " + x); } </script> ``` 在这个示例中，当用户选择下拉列表中的一个选项时，会触发myFunction()函数，该函数会获取用户选择的选项并弹出一个包含所选选项的警示框。 注意，onchange事件只有在元素失去焦点时才会触发。如果您需要在用户更改元素的值时立即执行操作，则应该使用oninput事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值