js的下拉框事件之onchange

最新推荐文章于 2022-11-01 00:25:29 发布
最新推荐文章于 2022-11-01 00:25:29 发布
阅读量1.5k 收藏 4
点赞数 2
原文链接：https://segmentfault.com/a/1190000004434194
版权

记录下用js的下拉框事件来实现切换图片和实现链接跳转的两个例子：
1.JS实现下拉框切换图片方法：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>js实现下拉框选中要显示的图片</title>
</head>
<body>
    <img width=500 height=500 src="images/01.jpg" name="img"> 
        <SELECT onChange="document.img.src=options[selectedIndex].value">
        //onchange事件也可以用document.getElementById('img').src=this.value
        <option value="images/04.jpg">油菜花</option> 
        <option value="images/03.jpg">郁金香</option> 
        <option value="images/02.jpg">菊花</option> 
        <option value="images/01.jpg">枫叶</option> 
    </SELECT> 
</body>
</html>

备注：

options[selectedIndex].value //是获取value值；
options[selectedIndex].text  //是获取下拉框的文本值。

2.下拉框实现页面的跳转：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <select  onchange="window.location.href=this.options[this.selectedIndex].value">
        <option value="http:\\www.baidu.com">百度</option>
        <option value="http:\\www.sina.cn">新浪</option>
    </select>
</body>
</html>
weixin_34010949
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery JS下拉框点击触发事件 .change / .on('change') 以及选定的option值和文本内容提取
weixin_41147129的博客
03-14 2万+
第一步：创建一个select下拉框 <select id="cputurbocheck"> <option value="LongTerm">Long Term</option> <option value="ShortTerm">Short Term</option> </select> 首先要明确，想添加一个...
js-下拉列表操作（onchange）
03-29 294
这里输入代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="c...
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事件改变对应的select控件
ddu1780的博客
09-03 359
1、js处理当一个元素改变时触发事件：在所在元素出添加上 onchange="play()" 在js的最外层声明这个方法并且做相应的处理 2、获取一个select的vale值 document.getElementById("alarm").value=="0000" 3、play()方法将select控件设置默认选择为初始的状态 function play(){ ...
下拉列表的onchange事件
zixiao_YING的专栏
12-13 8581
昨天调了半天的前台界面，最后终于实现了想要的下拉列表值变化，跳转action效果。错误原因为：1.将" onchange="goUrl(2)"写成" onchange="goUrl(2);"导致JS行为不执行；2.在函数中获取值时，将var navId = document.getElementById("navId").value; 写成var navId = document.getEleme
ajax完美解决的下拉框的onchange问题
12-08
即在触发地区下拉框的onchange事件时，代理商的下拉框选项也相应的改变，比如选择地区 湖南—〉长沙，那么代理商下拉框只显示长沙的代理商。 本来认为这个很好实现，但实际改起来的时候发现问题多多，主要问题是原有...
js触发onchange事件的方法说明
12-09
js中onchange事件是在客户端改变输入控件的值，比如一个textbox，会出发的一个事件。但是如果在js代码中改变一个textbox的value，而不是通过键盘输入改变一个textbox值的话，是不会出发onchange事件的。 那么，如何...
BootStrap中关于Select下拉框选择触发事件及扩展
09-01
当用户在下拉框中做出选择时，我们可以利用JavaScript监听`onchange`事件来捕获这一行为。`onchange`事件会在用户改变选中项后触发，这不仅适用于下拉框，也适用于单选按钮和复选框。 例如： ```html ...
jsp中select的onchange事件用法实例
10-23
主要介绍了jsp中select的onchange事件用法,以实例形式较为详细的分析了JSP数据库查询、遍历及结合JavaScript响应鼠标事件处理select相关技巧,需要的朋友可以参考下
js下拉框三级联动菜单选择代码
06-11
在这个案例中，我们需要监听第一个下拉框的`onchange`事件，当用户更改选择时触发相应的函数。这个函数会读取用户的选择，并更新后续两个下拉框的选项。数据结构通常是树形的，例如，省-市-区的数据可以用对象数组...
JS中的事件
ahhhhhhlzc的博客
11-01 1781
JS中的事件
JavaScript - 实现获取select下拉框选项的改变触发的onchange事件选择的option值
Leeroys_Zzzz的博客
08-13 2945
运用JavaScript实现获取select下拉框选项的改变触发的onchange事件选择的option值
【前端】＜select＞标签添加onchange事件【HTML+CSS+JavaScript(JS)】
cc2855816075的博客
02-12 4757
效果： 利用onchange事件绑定函数，以实现点击下拉框（下拉框选中内容修改）时，进行相关操作。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>give-a-whirl</title> </head> <body> <script type="text/javascript"> function
js 触发 select onchange事件
zml6308的专栏
02-25 6819
select 或text的onchange事件需要手动（通过键盘输入）改变select或text的值才能触发，如果在js中给select或text赋值，则无法触发onchang事件， 例如，在页面加载完成以后，需要触发一个onChange事件，在js中用document.getElementById("province").value="湖北";直接给select或text赋值是不行的，要想实现
Select下拉框onchange事件获取option的value值
热门推荐
君醉酒的博客
10-11 10万+
请选择主类别 1 2 show_sub的JS方法： function show_sub(v){ alert(v); }
select框内容改变时触发事件的实现
哒哒的博客
02-23 9万+
重要 重要 重要 其实只需要使用change就可以实现 &lt;select id="test" &gt; &lt;/select&gt; 在js中，使用 $("#test").change(function(){ //要触发的事件 }); 这样就可以实现想要的功能了！！！ 对的，就是这么简单...
js触发select的change事件
by breeze
03-15 1万+
写一个Chrome插件是碰到的问题，因为好像没法直接在注入的代码里面调用页面本身的方法，所以只能通过发送change事件让页面本身去执行了。 先是看来click事件的触发，下面给出的是change的事件触发： st = document.getElementById("order_billing_state"); ev = document.createEvent("HTMLEvents");
html修改时间触发onchange,js 触发select onchange事件代码
weixin_35225189的博客
06-03 639
select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发，如果在js中给select或text赋值，则无法触发onchang事件，例如，在页面加载完成以后，需要触发一个onChange事件，在js中用document.getElementById("province").value="湖北";直接给select或text赋值是不行的，要想实现手动...
select下拉框onchange事件
最新发布
06-28
### 回答1： "select" 下拉框的 "onchange" 事件是在用户选择不同的选项时触发的事件。当用户选择下拉框中的不同选项时，会调用 "onchange" 事件的 JavaScript 代码。这可以用来做很多有用的事情，如更新页面元素的值或向服务器发送请求。 ### 回答2： select下拉框是一种常见的HTML表单元素，它允许用户从一个预定义的选项列表中选择一个值。当用户在下拉框中选择一个不同的选项时，会触发onchange事件。 onchange事件是HTML中处理用户交互的一种事件，当元素内容发生改变时会触发该事件。在select下拉框中，当用户选择一个不同的选项时，会触发onchange事件。通常情况下，我们可以通过JavaScript来为select下拉框添加onchange事件的处理函数，完成相应的逻辑操作。 下面是一个简单的例子，展示如何为select下拉框添加onchange事件： ``` <!DOCTYPE html> <html> <body> <select id="mySelect" onchange="myFunction()"> <option value="0">Option 1</option> <option value="1">Option 2</option> <option value="2">Option 3</option> </select> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("mySelect").value; document.getElementById("demo").innerHTML = "You selected: " + x; } </script> </body> </html> ``` 在这个例子中，我们通过onchange事件为select下拉框绑定了一个名为myFunction的处理函数。当用户改变select下拉框的选项时，就会自动调用myFunction函数。 myFunction函数中，我们通过document.getElementById获取select下拉框的值，并将其赋值给变量x。接着，我们使用innerHTML将选定的选项值输出到页面上。 总的来说，select下拉框的onchange事件为我们提供了一种响应用户操作的方式，能够完成非常灵活多变的交互效果。 ### 回答3： select下拉框是一个非常常见的HTML表单元素，它允许用户通过点击展开菜单从而选择其中的某个选项。而当用户在select下拉框中选择了不同的选项时，可以通过onchange事件来触发对应的响应。 onchange事件可以用于<select>元素，它表示当select元素中的选项被改变时触发的事件。这个事件通常用于在用户选择下拉菜单中的选项后执行一些操作，例如根据选择的选项来修改页面显示内容。 onchange事件可以通过JavaScript代码来实现，具体的代码如下： ```javascript <select onchange="myFunction()"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> <option value="option4">Option 4</option> </select> <script> function myFunction() { var selectValue = document.querySelector('select').value; alert(selectValue); } </script> ``` 上述代码中，onchange事件被绑定到<select>元素中，当用户在下拉框中选择不同的选项时，就会触发myFunction()函数，该函数中使用了document.querySelector()方法获取了当前<select>元素的选中的值，然后使用alert()方法弹出选中值，用户就可以知道自己选择了哪个选项。 在实际应用中，onchange事件可以结合AJAX技术来实现动态刷新页面内容，在select下拉框中选择不同的选项后，页面内容会被动态更新，提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值