如何使用 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+ 次瀏覽

啟動您的職業生涯

完成課程後獲得認證

開始學習
廣告