1. Application of the drop-down box
The drop-down box select in the website is a frequently used control. The following will introduce the operation of JQuery to achieve the value and text of the drop-down box select, dynamic binding options, and events.
1.1 Get the value of the selected item
var value = $("#selectUser").val();1.2 Get the text of the selected item
var text = $("#selectUser").find("option:selected").text();1.3 Get the index of the selected item
var index = $("#selectUser").get(0).selectedIndex;1.4 Get the total number of options
var total = $("#selectUser option").length;1.5 Set the selected item
//设置选中下拉框中值为5的选项
$("#selectUser").val(5);1.6 Delete an option
//删除下拉框中值为3的选项
$("#selectUser option[value='3']").remove();1.7 Clear all options
$("#selectUser").empty();1.8 Dynamically bind data
if (data && data.length > 0) {
//遍历数据
for (var i = 0; i < data.length; i++) {
//绑定数据
var option = "<option value=" + data[i].value + ">" + data[i].text + "</option>";
$("#selectUser").append(option);
}
}1.9 change event
//change事件
$("#selectUser").change(function(){
var value = $(this).val();
alert(value);
});2. Comprehensive examples
Example: Use JQuery to operate the drop-down box select.
Example requirements:
- Realize the dynamic binding data of the drop-down box.
- Realize to get the value, text, and index of the selected item in the drop-down box.
- Achieve the deletion of an option in the drop-down box, and clear all the options.
- Implement the change event of the drop-down box.
Execution effect:
(1) Page code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框的应用</title>
<meta name="author" content="pan_junbiao的博客">
<style>
table { border-collapse: collapse;}
table,table tr th, table tr td { border:1px solid #000000; padding: 5px 10px;}
.select{ padding: 3px; width:200px; height:30px; font-size: 16px;}
.btn{padding: 5px; font-size: 14px; margin-top: 10px;}
</style>
</head>
<body>
<div align="center">
<table>
<caption>用户信息</caption>
<tr>
<th>博客信息：</th>
<td>您好，欢迎访问 pan_junbiao的博客</td>
</tr>
<tr>
<th>博客地址：</th>
<td>https://blog.csdn.net/pan_junbiao</td>
</tr>
<tr>
<th>选择用户：</th>
<td>
<select id="selectUser" class="select">
<option value="">请选择</option>
</select>
</td>
</tr>
</table>
<input type="button" class="btn" id="btnLoad" value="动态绑定数据"/>
<input type="button" class="btn" id="btnTotal" value="选项总数"/>
<input type="button" class="btn" id="btnSelect" value="设置选中项"/>
<input type="button" class="btn" id="btnValue" value="选中项的值"/><br/>
<input type="button" class="btn" id="btnText" value="选中项的文本"/>
<input type="button" class="btn" id="btnIndex" value="选中项的索引"/>
<input type="button" class="btn" id="btnDelete" value="删除一项"/>
<input type="button" class="btn" id="btnDeleteAll" value="清空所有项"/>
</div>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function()
{
//动态绑定数据
$("#btnLoad").click(function(){
//执行Ajax请求
$.ajax({
type: "POST",
url: "/getUserList",
async: true,
dataType: "json",
success: function (data) {
//清空下拉框选项
$("#selectUser").empty();
$("#selectUser").append("<option value=''>请选择</option>");
if (data && data.length > 0) {
//遍历数据
for (var i = 0; i < data.length; i++) {
//绑定数据
var option = "<option value=" + data[i].value + ">" + data[i].text + "</option>";
$("#selectUser").append(option);
}
}
}
});
});
//选项总数
$("#btnTotal").click(function(){
var total = $("#selectUser option").length;
alert(total);
});
//设置选中项
$("#btnSelect").click(function(){
//设置选中下拉框中值为5的选项
$("#selectUser").val(5);
});
//获取选中项的值
$("#btnValue").click(function(){
var value = $("#selectUser").val();
alert(value);
});
//获取选中项的文本
$("#btnText").click(function(){
var text = $("#selectUser").find("option:selected").text();
alert(text);
});
//获取选中项的索引
$("#btnIndex").click(function(){
var index = $("#selectUser").get(0).selectedIndex;
alert(index);
});
//删除一项
$("#btnDelete").click(function(){
//删除下拉框中值为3的选项
$("#selectUser option[value='3']").remove();
});
//清空所有项
$("#btnDeleteAll").click(function(){
$("#selectUser").empty();
});
//change事件
$("#selectUser").change(function(){
var value = $(this).val();
alert(value);
});
});
</script>
</html>(2) Controller code:
/**
* 下拉框应用控制器
* @author pan_junbiao
**/
@Controller
public class SelectController
{
/**
* 进入页面
*/
@RequestMapping("toGetSelectView")
public String toGetSelectView()
{
return "getSelect.html";
}
/**
* 获取用户列表选项
*/
@RequestMapping("getUserList")
@ResponseBody
public List<OptionModel> getUserList()
{
List<OptionModel> optionModelList = new ArrayList<>();
optionModelList.add(new OptionModel("pan_junbiao的博客_01",1));
optionModelList.add(new OptionModel("pan_junbiao的博客_02",2));
optionModelList.add(new OptionModel("pan_junbiao的博客_03",3));
optionModelList.add(new OptionModel("pan_junbiao的博客_04",4));
optionModelList.add(new OptionModel("pan_junbiao的博客_05",5));
return optionModelList;
}
}Results of the:
