如何使用 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.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-09-15

5K+ 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始
廣告