在 JavaScript 中使用 Onchange 创建下拉菜单
在本文中,将详细讨论以下概念。
- JavaScript 中的函数是什么?
- 什么是
onchange
函数及其在 JavaScript 中的用途? - 使用 JavaScript 中的
onchange
函数创建一个下拉列表。
JavaScript 中的函数
在 JavaScript 中,函数是最基本的构建组件之一。函数类似于执行任务或计算值的过程。
尽管如此,一个进程必须接受一些输入并提供一个带有一些明显链接的输出才能成为一个函数,并且输入和输出之间必须存在关系。因此,在使用它之前,你必须在要调用的范围内的某个位置声明一个函数。
JavaScript 中的函数定义
它也被称为函数声明。函数定义遵循 function
关键字。
下面的示例显示在函数声明中启动了 function
关键字。
函数声明包含作为函数名称的 function
关键字、函数参数列表(以逗号分隔并括在括号中)以及函数的 JavaScript 语句(包含在大括号 {...}
中)。
function square(x) {
return x * x;
}
square
函数只有一个参数 x
。该函数包含一行,声明返回函数的参数 x
乘以自身。
返回的语句指定函数返回的值。
return x * x;
因为参数是按值有效地提供给函数的,所以如果函数体中的代码将不同的值分配给给函数的参数,则该更改不会全局反映或反映在称为函数
的代码中。
JavaScript 中的 onchange
函数
JavaScript 中的 onchange
事件是一个重要的事件,用于处理在事件执行期间发生的事件变化。当执行事件时值的状态发生变化时,会完全触发 onchange
事件。
onchange
事件与 oninput
事件非常相似,不同之处在于 oninput
事件会立即发生,并且值更改同样相对较快。尽管如此,onchange
事件本质上是在事件的值失去其执行焦点时发生的。
object.onchange = function() {
BlocTAK
};
当焦点改变时,调用 onchange
函数的对象,然后运行 BlocTAK
来操作和修改值状态或改变和转换事件。
<html>
<body>
<p>Modify the text in the input field, then click outside the field to fire the onchange event.</p>
Enter something: <input onchange="myFunction(this.value)">
<script>
function myFunction(val) {
alert(" The new value is: " + val);
}
</script>
</body>
</html>
你可以在此链接中找到上述代码。下面使用示例 Hello World
附上上述代码的屏幕截图。
在 JavaScript 中使用 onchange
函数创建下拉菜单
这里 onchange
函数用作事件侦听器。
<select name="type" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option value='1 lac'>Toyota</option>
<option value='2 lac'>Kia</option>
<option value='3 lac'>Honda</option>
<option value='4 lac'>Suzuki</option>
<option value='5 lac'>Lamborghini</option>
</select>
这里的 onchange
函数是用 jsFunction(this.value);
声明的。
上述 HTML 代码的 JavaScript 外部文件如下。
function jsFunction(value) {
alert(value);
}
你可以从此链接中看到上述代码中的 onchange
函数处理的工作。
因此,在上面的文章中,对函数以及如何在 JavaScript 中声明它们进行了详细的说明。然后详细介绍了有关 onchange
函数的信息、它的作用以及如何在 HTML 和 JavaScript 中声明它。
然后在下拉菜单中使用 onchange
功能,使下拉菜单对用户更方便。JavaScript 中的 onchange
函数至关重要,因为它允许用户使用输入更改然后验证值,以交叉检查所提供输入的值转换。
它与 JavaScript 中的 oninput
函数协同工作。