JQuery下拉框的应用
在网站中下拉框select是经常使用的控件，下面将介绍JQuery实现下拉框select的获取值与文本、动态绑定选项、事件等操作。
1.1 获取选中项的值
var value = $("#selectUser").val();
1.2 获取选中项的文本
var text = $("#selectUser").find("option:selected").text();
1.3 获取选中项的索引
var index = $("#selectUser").get(0).selectedIndex;
1.4 获取选项总数
var total = $("#selectUser option").length;
1.5 设置选中项
//设置选中下拉框中值为5的选项
$("#selectUser").val(5);
1.6 删除一选项
//删除下拉框中值为3的选项
$("#selectUser option[value='3']").remove();
1.7 清空所有选项
$("#selectUser").empty();
1.8 动态绑定数据
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事件
//change事件
$("#selectUser").change(function(){
var value = $(this).val();
alert(value);
});
2、综合实例
实例：使用JQuery对下拉框select的操作。
实例要求：
实现下拉框的动态绑定数据。
实现获取下拉框选中项的值、文本、索引。
实现下拉框的删除一个选项，清空所有选项。
实现下拉框的change事件。
（1）页面代码：
<!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）控制器代码：
/**
* 下拉框应用控制器
* @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;
}
}jquery怎么操作select？
jquery操作select分为获取option的值、删除option、增加option、获取option的长度、清空select、判断select框中是否存在某个值。
1、得到选中的 select 的 option 的值或者text
//为Select添加事件，当选择其中一项时触发
$(“#select_id”).change(function(){//code…});
//获取Select选择的 Text
var checkText=$(“#select_id”).find(“option:selected”).text();
//获取Select选择的 Value
var checkValue=$(“#select_id”).val();
//获取Select选择的 索引值
var checkIndex=$(“#select_id “).get(0).selectedIndex;
//获取Select最大的索引值 jQuery设置Select选择的 Text 和 Value
var maxIndex=$(“#select_id option:last”).attr(“index”);
//设置Select索引值为1的项选中
$(“#select_id “).get(0).selectedIndex=1;
//设置Select的Value值为4的项选中
$(“#select_id “).val(4);
//设置Select的Text值为jQuery的项选中
$(“#select_id option[text=’jQuery’]”).attr(“selected”, true);2、删除选中的 select 的 option.（相关课程推荐：jQuery教程）
$(“#select_id option:last”).remove(); //删除Select中索引值最大Option(最后一个)
$(“#select_id option[index=’0′]”).remove(); //删除Select中索引值为0的Option(第一个)
$(“#select_id option[value=’3′]”).remove(); //删除Select中Value=’3’的Option
$(“#select_id option[text=’4′]”).remove(); //删除Select中Text=’4’的Option
如果要删除选中的option ，则需要先得到 选中option 的序号.
var checkIndex=$(“#select_id “).get(0).selectedIndex;
然后再调用上面的方法删除.3、向select中增加新的option.
$(“#select_id”).append(“<option value=’Value’>Text</option>”); //为Select追加一个Option(下拉项)
$(“#select_id”).prepend(“<option value=’0′>请选择</option>”); //为Select插入一个Option(第一个位置)4、得到select option 长度，也就是个数size
var totalcount=$(“#single_user_choice”).get(0).options.length;5、清空select.
$(“#single_user_choice”).get(0).options.length=0;6、两个select 框之间互相添加删除，从左边到右边，从右边到左边的操作，通常是多选情况。
var $options = $(‘#select1 option:selected’); //获取当前选中的项
var $remove = $options.remove(); //删除下拉列表中选中的项
$remove.appendTo(‘#select2’); //追加给对方7、判断在 select 框中是否存在某一个值的选项
function is_Exists(selectid,value){
var theid=‘#’+selectid;
var count=$(theid).get(0).options.length;
var isExist = false;
for(var i=0;i<count;i++){
if ($(theid).get(0).options[i].value == value){
isExist=true;
break;
}
}
return isExist;
}
评论区