select中onchange的用法

//select中的onchange是在下拉框中所选的值发生变化时触发的事件。

//可以给onchange事件绑定一个方法，在onchange事件触发时会执行绑定的方法。

//示例：

//首先可以响应select的onchange事件来调用JS编写的事件响应函数，如

<select id="select1" name="select1" onchange="outputSelect();">

<option>

</select>

//然后编写事件响应函数：

//如果select位于表单（form1）中，select的name为select1，则可使用如下方法：

//获得用户选中的项的索引

var index=windowdocumentform1select1selectedIndex;

//根据索引获得该选项的value值

var val=windowdocumentform1select1options[index]value;

//如果select并非表单元素，假设select的id为select1,则如下：

var index=windowdocumentgetElementByIdx_xx_x("select1")selectedIndex;

var val=windowdocumentgetElementByIdx_xx_x("select1")options[index]value;

//如果要输出选择结果，假设HTML中定义了一个<div id="output"></div>，则如下输出：

windowdocumentgetElementByIdx_xx_x("output")innerText=val;

//一个示例：

function outputSelect(){

//获取用户选中的项的索引

var index=windowdocumentgetElementByIdx_xx_x("select1")selectedIndex;

//根据index获取选中项的value值

var val=windowdocumentgetElementByIdx_xx_x("select1")options[index]value;

//根据index获取选中项的Text值，即在下拉列表中显示的选项文本

var vname=windowdocumentgetElementByIdx_xx_x("select1")options[index]text;

//输出value :

textdocumentgetElementByIdx_xx_x("output")innerText=val " : " vname;

onchange从这个名称就可以看出，只有在select的选项有改变（change）的时候才会触发这个事件的。一般情况下select的第一个选项是默认选项，当你选中第一个项时，由于值没有改变，所以是不会触发onchange事件的。解决这个问题并没有什么完美的办法，一般你可以增加一个空值的项作为第一选项，比如<option>请选择</option>，这样原来的第一项就变成了第二项，点击该项值就有所改变了，就会触发onchange事件了；或者把除第一项外的其他项设为默认值，这样点击第一项也会触发事件的。

\x0d\ 1\x0d\ 2\x0d\ 3\x0d\ 4\x0d\ 5\x0d\ 6\x0d\\x0d\当我鼠标移上select中的一个option时能不能获取当前option的值呢？那个onchange我知道，我想用onmouseove事件是不是可以做到？\x0d\如果不行，有哪个大大能告诉我怎么重写个select啊，从而能达到上述效果呢？\x0d\我想了很长时间都没想出来，希望有哪个大大解决下，那个希望在html上做。\x0d\问题补充：qinglangee 写道 \x0d\ \x0d\ \x0d\ \x0d\ \x0d\function attachTest() { \x0d\ $("#select")bind("mouseover", function(e){ \x0d\ if (etargetid!= 'select') { \x0d\ documentgetElementById('test')innerHTML = etargetvalue; \x0d\ } \x0d\ }); \x0d\} \x0d\ \x0d\ \x0d\ \x0d\Something Here \x0d\\x0d\ \x0d\One \x0d\Two \x0d\Three \x0d\Four \x0d\ \x0d\ \x0d\ \x0d\\x0d\
qinglangee 写道以下代码只在firefox chrome等浏览器中有效
因为ie6中没有onmouseover事件,所以用jquery绑定事件也是一样

所以还是用div来模仿select显示比较好
\x0d\ \x0d\ \x0d\ \x0d\\x0d\function showselectValue(e) { \x0d\ if (etargetid!= 'select') { \x0d\ documentgetElementById('test')innerHTML = etargetvalue; \x0d\ } \x0d\} \x0d\\x0d\function attachTest() { \x0d\ documentgetElementById('select')addEventListener('mouseover',showselectValue,false); \x0d\} \x0d\\x0d\ \x0d\\x0d\ \x0d\\x0d\ \x0d\\x0d\Something Here \x0d\\x0d\ \x0d\One \x0d\Two \x0d\Three \x0d\Four \x0d\ \x0d\\x0d\ \x0d\ \x0d\

回答于 2022-11-16

以上就是关于select中onchange的用法全部的内容，包括:select中onchange的用法、<select>控件中，选中第一个值是不会触发onchange事件的，如何使选中第一值可以触发事件呢、如何让鼠标移到select中option上时产生事件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！