jQuery 获取选择名称值 - JavaScript

在 JavaScript 中使用 jQuery 可以轻松地操作 DOM 元素和处理事件。其中一个常见的任务是获取选择元素的名称和值。在本文中，我们将介绍如何使用 jQuery 来实现这个任务。

获取选择元素的名称和值

要获取选择元素的名称和值，我们可以使用 jQuery 的 .val() 函数来获取元素的值，并通过 .attr() 函数来获取元素的名称。

以下是一个示例代码片段，演示如何获取选择元素的名称和值：

// HTML 代码片段
<div class="form-control">
  <input type="text" name="username" value="John Doe">
</div>

<div class="form-control">
  <select name="gender">
    <option value="male">Male</option>
    <option value="female" selected>Female</option>
  </select>
</div>

<div class="form-control">
  <input type="checkbox" name="agree" checked>
  <label for="agree">I agree to the terms and conditions</label>
</div>

// JavaScript 代码片段
$(document).ready(function() {
  // 获取输入框的名称和值
  var username = $('input[name="username"]').attr("name");
  var usernameValue = $('input[name="username"]').val();
  
  // 获取下拉列表的名称和值
  var gender = $('select[name="gender"]').attr("name");
  var genderValue = $('select[name="gender"]').val();
  
  // 获取复选框的名称和值
  var agree = $('input[name="agree"]').attr("name");
  var agreeValue = $('input[name="agree"]').is(":checked");
  
  // 打印结果
  console.log("Username: " + username + ", Value: " + usernameValue);
  console.log("Gender: " + gender + ", Value: " + genderValue);
  console.log("Agree: " + agree + ", Value: " + agreeValue);
});

在上面的代码中，我们首先使用选择器来选择不同类型的表单元素，然后使用 .attr() 函数获取其名称，使用 .val() 函数获取其值。最后，我们通过 console.log() 将结果打印出来。

运行上述代码，将会输出以下内容：

Username: username, Value: John Doe
Gender: gender, Value: female
Agree: agree, Value: true

总结

通过使用 jQuery 的 .attr() 和 .val() 函数，我们可以轻松地获取选择元素的名称和值。这对于处理表单数据或执行其他与选择元素有关的任务非常有用。希望本文能够帮助你更好地理解如何使用 jQuery 获取选择元素的名称和值。

请注意以上代码是基于 jQuery 3.x 版本编写的，如果你使用的是其他版本，可能需要对代码进行适当的修改。