如何使用 JavaScript 获取包含下拉列表的表单的 ID？

在本教程中，我们将学习如何使用 JavaScript 获取包含下拉列表的表单的 ID。

HTML 元素的id属性提供了一个唯一的id。id 属性值在 HTML 内容中必须唯一。样式表属性指向特定的样式声明。JavaScript 也使用它来访问和更改具有指定 id 的元素。

id 属性用于为元素提供唯一的标识符。在一个网页上，不能有两个以上具有相同 id 的元素。

计算机 GUI 中的下拉菜单是一个提供选项列表的菜单。列表中的菜单标题或当前选择的项目始终可见。当选择可见项目时，列表中的更多项目将“下拉”到视图中，用户可以从中进行选择。

以下是我们可以使用 JavaScript 获取包含下拉列表的表单 ID 的方法：

使用 id 属性

在 JavaScript 中，使用id属性来获取包含下拉列表的表单的 id。此 id 属性返回或设置元素的 id 属性值。Element 接口的 id 属性表示元素的标识，与全局 id 属性相对应。如果 id 值不为空，则它在文档内必须唯一。

id 经常与 getElementById() 一起使用来获取特定元素。另一个常见的情况是使用元素的 ID 作为选择器，当使用 CSS 装饰文档时。

语法

var value = document.getElementById("select").form.id;

getElementbyId() 从下拉菜单中获取选项以获取表单的 id 并将其存储在 value 变量中。

示例

在这个例子中，我们使用 JavaScript 的 id 属性来获取包含下拉列表的表单的 id。创建了一个 id 为“myForm1”的表单，其中包含一个按钮。创建了另一个 id 为“myForm2”的表单，其中包含一个下拉列表。

该下拉列表包含基本、中级、高级和专家选项。使用 form.id 属性查找此列表的 id。用户必须单击“获取表单 ID”按钮才能在单击后看到表单 ID。该值存储在 form1 变量中。这将打印到输出。

<html>
<body>
   <p> Get the id of a form containing dropdown list using <i> id
   property </i> in JavaScript </p>
   <button onclick = "myFunction()"> Get Form id </button>
   <p id = "root"> </p>
   <form id = "myForm1">
      <p> Select JavaScript course from below given options </p>
   </form>
   <form id = "myForm2">
      <select id = "mySelect">
         <option> Basic </option>
         <option> Intermediate </option>
         <option> Advanced </option>
         <option> Expert </option>
      </select>
   </form>
   <script>
      document.getElementById("root").onclick = function()
      {myFunction()};
      function myFunction() {
         var form1 = document.getElementById("mySelect").form.id;
         document.getElementById("root").innerHTML = "Form id with
         dropdown: "+form1;
      }
   </script>
</body>
</html>

使用 jQuery 库

JQuery 是一个紧凑、快速且功能齐全的 JavaScript 库。一个易于使用且功能强大的 API 可用于跨多个浏览器简化 HTML 文档的导航和操作、事件处理、动画和 Ajax。由于其多功能性和可扩展性，jQuery 改变了数百万人编写 JavaScript 的方式。

我们使用 jQuery 中的 closest form 属性来获取包含下拉列表的表单的 id。此属性返回表单 id，该 id 传递给函数。

语法

var form = $( "#myForm" ).closest("form").attr("id");

form 变量存储表单的名称，该表单包含下拉列表和要显示的 id。

示例

在这个例子中，我们使用了名为 jQuery 的外部库来检索包含下拉列表的表单的 id。生成了一个 id 为“myForm1”的表单，其中包含一个按钮。生成了另一个 id 为“myForm2”的表单，其中包含一个下拉列表。

下拉列表中的选项为基本、中级、高级和专家。通过使用 jQuery 的 closest id 属性来确定此列表的 id。用户必须单击“获取表单 ID”按钮才能看到表单 ID。这将保存在 form2 变量中。这是显示的值。

<html>
<head>
   <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
   <form id = "myForm1">
      <p> Select JavaScript course from below given options </p>
   </form>
   <form id = "myForm2">
      <select id = "mySelect">
         <option> Basic </option>
         <option> Intermediate </option>
         <option> Advanced </option>
         <option> Expert </option>
      </select>
   </form>
   <button onclick = "myFunction()"> Get Form id </button>
   <p id = "result"> </p>
   <script>
      document.getElementById("result").onclick = function()
      {myFunction()};
      function myFunction() {
         var form2 = $( "#myForm2" ).closest("form").attr("id");
         document.getElementById("result").innerHTML = "Form id with
         dropdown: "+form2;
      }
   </script>
</body>
</html>

在本教程中，我们学习了两种使用 JavaScript 获取包含下拉列表的表单 ID 的方法。第一种方法是使用 JavaScript 的 id 属性。第二种方法是使用名为 jQuery 的外部 JavaScript 库，它将获取包含下拉列表的特定表单的 ID。

更新于：2022年9月15日

5000+ 次浏览

启动您的职业生涯

完成课程后获得认证

开始学习
广告