JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

JS和JQuery获取下拉列表框的值主要有以下几种方法：

1. 使用原生JS实现获取下拉列表框的值

1.1 获取select元素的值

通过JS获取select元素的值，可以使用以下代码：

var select = document.getElementById("selectId"); // 通过id获取select元素
var selectedValue = select.options[select.selectedIndex].value; // 获取用户选中的option的value值

这里是一个简单的示例：

<select id="selectId">
  <option value="value1">选项一</option>
  <option value="value2">选项二</option>
  <option value="value3">选项三</option>
</select>
<button onclick="getSelectedValue()">获取选中值</button>

<script>
function getSelectedValue() {
  var select = document.getElementById("selectId");
  var selectedValue = select.options[select.selectedIndex].value;
  alert(selectedValue);
}
</script>

1.2 获取checkbox元素的值

通过JS获取checkbox元素的值，可以使用以下代码：

var checkbox = document.getElementById("checkboxId"); // 通过id获取checkbox元素
var checkedValue = checkbox.checked; // 获取checkbox的选中状态

这里是一个简单的示例：

<input type="checkbox" id="checkboxId">
<button onclick="getCheckedValue()">获取选中状态</button>

<script>
function getCheckedValue() {
  var checkbox = document.getElementById("checkboxId");
  var checkedValue = checkbox.checked;
  alert(checkedValue);
}
</script>

2. 使用JQuery实现获取下拉列表框的值

2.1 获取select元素的值

通过JQuery获取select元素的值，可以使用以下代码：

var selectedValue = $("#selectId").val(); // 获取选中的option的value值

这里是一个简单的示例：

<select id="selectId">
  <option value="value1">选项一</option>
  <option value="value2">选项二</option>
  <option value="value3">选项三</option>
</select>
<button onclick="getSelectedValue()">获取选中值</button>

<script>
function getSelectedValue() {
  var selectedValue = $("#selectId").val();
  alert(selectedValue);
}
</script>

2.2 获取checkbox元素的值

通过JQuery获取checkbox元素的值，可以使用以下代码：

var checkedValue = $("#checkboxId").prop("checked"); // 获取checkbox的选中状态

这里是一个简单的示例：

<input type="checkbox" id="checkboxId">
<button onclick="getCheckedValue()">获取选中状态</button>

<script>
function getCheckedValue() {
  var checkedValue = $("#checkboxId").prop("checked");
  alert(checkedValue);
}
</script>

以上就是JS和JQuery获取下拉列表框的值的完整攻略和示例代码。