JQuery 操作select

心已赠人 2022-05-27 02:56 179阅读 0赞

jQuery获取Select选择的Text和Value：

var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的text
     
    var checkValue=$("#select_id").val(); //获取Select选择的Value
     
    var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
     
    var maxIndex=$("#select_id :last").prop("index"); //获取Select最大的索引值

jQuery添加/删除Select的Option选项：

$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉选项)
     
    $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
     
    $("#select_id :last").remove(); //删除Select中索引值最大Option(最后一个)
     
    $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
     
    $("#select_id option[value='1']").remove(); //删除Select中指定value的Option
    
    $("#select_id").empty(); // 清空select option选项

JQuery设置select的value为指定值的项选中：

$("#select_id ").val(1); //方法一
    $("#select_id  [value='1']").prop("selected", true); // 方法二
    $("#select_id  option[value='1']").prop("selected", true); // 方法三

JQuery  select三级联动实现示例：

// 省
    $("#province").change(function() {
    	var parentId = $(this).val();
    	$.ajax({
    		url : '/getRegionByParentId.json',
    		type : 'get',
    		data : {
    			parentId : parentId,
    			levle:'02'
    		},
    		success : function(data) {
    			var cityObj = $("#city");
    			cityObj.empty(); // 清空城市select option
    			if(data!=null){
    				cityObj.append("<option value=''>'未选择'</option>");
    				$.each(data, function(index, value) {
    					cityObj.append("<option value='" + value.id + "'>" + value.name + "</option>");
    				});
    			}
    		},
    		error: function(){
    			layer.msg('获取失败！！', {icon: 7});
    		}
    	});
    });
    // 市
    $("#city").change(function() {
    	var parentId = $(this).val();
    	$.ajax({
    		url : '/getRegionByParentId.json',
    		type : 'get',
    		data : {
    			parentId : parentId,
    			levle:'03'
    		},
    		success : function(data) {
    			var countyObj = $("#county");
    			countyObj.empty(); // 清空县区select option
    			if(data!=null){
    				countyObj.append("<option value=''>'未选择'</option>");
    				$.each(data, function(index, value) {
    					countyObj.append("<option value='" + value.id + "'>" + value.name + "</option>");
    				});
    			}
    		},
    		error: function(){
    			layer.msg('获取失败！！', {icon: 7});
    		}
    	});
    });