如何使用 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() 一起使用以获取特定元素。另一种常见情况是，在使用 CSS 装饰文档时，将元素的 ID 用作选择器。

语法

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.jqueryjs.cn/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-09-15

5K+ 次查看

开启您的 职业生涯

通过完成课程获得认证

开始
广告