jQuery中val方法的功能及範例

jQuery中val方法的功能及範例

在使用jQuery程式設計時，經常會涉及到取得或設定表單元素的值。這時候就可以用到jQuery中的val()方法。 val()方法是jQuery中的常用方法，用於取得或設定表單元素的值。在本文中，我們將詳細討論val()方法的功能，以及透過具體程式碼範例來展示它的用法。

一、val()方法的功能

val()方法用於取得或設定表單元素的值，這些表單元素包括input、textarea和select等。當val()方法不帶參數時，它會傳回符合元素集合中第一個元素的目前值。當val()方法帶一個參數時，它會設定所有符合元素的值。

二、範例程式碼

以下是一些範例程式碼，展示如何使用val()方法取得或設定表單元素的值。

1. 取得input輸入框的值

假設我們有一個輸入框，現在我們想要取得使用者輸入的值並輸出到控制台：

var username = $("#username").val();
console.log(username);

2. 設定input輸入框的值

如果我們想要在輸入方塊中設定預設值，可以使用val()方法：

$("#username").val("John Doe");

3. 取得select下拉選單的值

假如我們有一個下拉式選單：

<select id="city">
  <option value="1">New York</option>
  <option value="2">Los Angeles</option>
  <option value="3">Chicago</option>
</select>

我們想要取得使用者選擇的值：

var city = $("#city").val();
console.log(city);

4. 設定select下拉選單的值

#如果我們希望預設選取Los Angeles：

$("#city").val("2");

5. #取得textarea的值

如果我們有一個元素：

<textarea id="message"></textarea>

我們想要取得使用者輸入的文字：

var message = $("#message").val();
console.log(message);

6. #設定textarea的值

如果我們想要在文字方塊中填入預設文字：

$("#message").val("Hello, world!");

透過上述範例程式碼，我們可以看到val()方法在取得和設定表單元素的值時的靈活性和實用性。透過結合具體程式碼範例的演示，希望讀者能更理解val()方法的用法，並在自己的專案中靈活運用。

以上是jQuery中val方法的功能及範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！