JQuery - 获取选择值

美国

使用JQuery可以轻松地获取HTML元素的选择值。当我们需要获取表单中的输入值或选择框的选中值时，JQuery提供了简单而强大的方法。

获取表单输入值

要获取表单中输入字段的值，我们可以使用.val()方法。该方法适用于文本框、密码框、文本区域等输入元素。

例如，假设我们有一个输入框：

<input type="text" id="name" value="John Doe">

我们可以使用以下代码获取输入框的值：

var name = $("#name").val();

在上面的代码中，$("#name")选择了id为"name"的输入框，并使用.val()方法获取了其值。现在，变量name将包含输入框的值"John Doe"。

获取选择框的选中值

要获取选择框的选中值，我们可以使用.val()方法或:selected选择器。

例如，假设我们有一个选择框：

<select id="country">
  <option value="us">美国</option>
  <option value="uk">英国</option>
  <option value="jp" selected>日本</option>
</select>

我们可以使用以下代码获取选择框的选中值：

var country = $("#country").val();

在上面的代码中，$("#country")选择了id为"country"的选择框，并使用.val()方法获取了其选中值。现在，变量country将包含"jp"，即日本的值。

案例代码

下面是一个完整的案例代码，演示了如何使用JQuery获取表单输入值和选择框的选中值：

html
<!DOCTYPE html>
<html>
<head>
  <title>JQuery - 获取选择值</title>
  <script src="JS">https://code.jquery.com/jquery-3.6.0.min.JS</a>"></script>
</head>
<body>
  <form>
    <input type="text" id="name" value="John Doe">
    <br>
    <select id="country">
      <option value="us">美国</option>
      <option value="uk">英国</option>
      <option value="jp" selected>日本</option>
    </select>
    <br>
    <button id="submit">提交</button>
  </form>
  <script>
    $(document).ready(function() {
      $("#submit").click(function(event) {
        event.preventDefault();
        var name = $("#name").val();
        var country = $("#country").val();
        console.log("姓名：" + name);
        console.log("选择的国家：" + country);
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了JQuery的.ready()方法来确保DOM加载完成后再执行代码。当点击提交按钮时，通过.click()方法绑定的事件处理程序将被触发。在事件处理程序中，我们使用.val()方法获取输入框和选择框的值，并通过console.log()方法将其输出到浏览器的控制台中。

通过JQuery，我们可以轻松地获取表单输入值和选择框的选中值。使用.val()方法可以获取输入字段的值，而选择框可以使用.val()方法或:selected选择器来获取选中值。这些功能使得处理表单数据变得简单而高效。

参考链接

- JQuery官方文档：https://api.jquery.com/val/