在 JavaScript 中使用 Onchange 创建下拉菜单

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中使用 Onchange 创建下拉菜单

作者：迹忆客最近更新：2024/03/22 浏览次数：

在本文中，将详细讨论以下概念。

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 函数协同工作。

上一篇：在 JavaScript 中实现单体类

下一篇：点击 JavaScript 提交表单

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享