【JQuery】实现select功能/动态下拉框：

---

一、使用script方法

1、html：

<div class="marl_30">
	<label for="exampleInputName2">发货单位：</label>
	<select id="consignerList"></select>
	<script type="text/html" id="consignerListJs">
		<% for(var i=0; i<consignerList.length; i++){ %>
			<option style="color: #000000;" 
			value="<%= consignerList[i].consigner %>,<%= consignerList[i].id %>">//这里传了consigner和id
			<%= consignerList[i].consigner %> </option>
	    <%} %>
	</script>
</div>

2.js:

<script>
let selectInfo={
	consigner:'',
}
getconsingerList()//调用方法

// 切换发货单位
$("#consignerList").change(function () {
	selectInfo.consigner = $(this).children('option:selected').val().split(',')[0];//获取发货单位名称
	localStorage.setItem("consinger", selectInfo.consigner);
	localStorage.setItem("consingerId", $(this).children('option:selected').val().split(',')[1]);//获取id

	getvarietyList()//查询货物方法
	//查询搜索方法
	...
});

// 搜索时的发货单位
function getconsingerList() {
	$.ajax({
		"url": _server2 + "/api/consigner/list?",
		"data": {
			consigner: '', //string false查询的发货单位名称
		},
		"type": "GET",
		"dataType": "json",
		"xhrFields": {
			"withCredentials": true
		},
		"success": function (res) {
			if (res.code == 0) {
				var consignerListJs = document.getElementById('consignerListJs').innerHTML;
				res.data.unshift({ consigner: '全部', id: '' })//数组首部添加
				document.getElementById('consignerList').innerHTML = template(consignerListJs, {
					consignerList: res.data
				});
			} else {
				alert(res.msg)
			}
		},
		"error": function (err) {
			alert(err);
		},
		"complete": function (XMLHttpRequest) {
			if ("REDIRECT" == XMLHttpRequest.getResponseHeader("REDIRECT")) {
				alert("请登录");
				window.location.href = XMLHttpRequest.getResponseHeader("CONTENTPATH");
			}
		}
	});
}
</script>

二、使用添加元素方法

1.html页面:

<form>
    垃圾名称：
    <div class="layui-inline">
        <select id="refusename" name="refusename">
            <option value="">全部</option>
        </select>
    </div>
</from>

2.js写法:

layui.use(['form', 'table', "laydate", 'layer'], function () {
    var form = layui.form;
    var table = layui.table;
    var layer = layui.layer;
    
    $.ajax({
    	//动态获取下拉选项的接口，返回数据主要是id+name
        url: '/refuse-web/admin/getRefuseName',
        dataType: 'json',
        type: 'get',
        success: function (data) {
            let str="<option value=''>全部</option>";
            for(let i of data){
            	//组装数据
                str+=`<option value='${i.id}'>${i.name}</option>`;
            }
            //jquery赋值方式
            $("#refusename").html(str);
            //重新渲染生效
            form.render();
        }
    });
 }

3、动态生成的select选中：

var str = Number(localStorage.getItem("stationId"))
if (str && str != null) {
	for (var i = 0; i < data.length; i++) {
		if (data[i].id == str) {
			$("#stationId").find("option[value=" + data[i].id + "]").prop("selected", true);
			$("#stationId").find("option[value=" + data[i].id + "]").attr("selected", true);
		}
	}
} else {
	$('#stationId option:eq(1)').prop('selected', true);
	localStorage.setItem('stationId', $('#stationId').val())
}