以前记得select很溜的,好久没写前端都忘完了,把以前的代码又看了下,得做笔记啊
一
2018-09-08 09:11:40
select里面应当填充List<Map<String, String>>类型数据
下面是一个三级下拉选择,第一级需要提前填充数据,第二三级是动态填充的
<span>产品品类:</span>
<select id="firstId" name="pl" onchange="cascadeSelect(this.value,'secondId')">
<option value>---请选择---</option>
<c:forEach items="${productList}" var="i">
<option value="${i.key}">${i.value}</option>
</c:forEach>
</select>
<span>产品系列:</span>
<select id="secondId" name="xl" onchange="cascadeSelect(this.value,'thirdId')">
<option value="">---请选择---</option>
</select>
<span>产品规格类:</span>
<select id="thirdId" name="guigelei">
<option value="">---请选择---</option>
</select>
这是js函数,ajax请求后台返回json数据,然后动态拼接select
function cascadeSelect(parentId,id){
$.post("mConfigController.do?selectProduct",{parentId:parentId},function (data) {
$("#"+id).empty();
$("#"+id).append("<option value>---请选择---</option>");
$.each(data,function(i,v){
$("#"+id).append("<option value='"+v.key+"'>"+v.value+"</option>");
});
},"json")
}
下面是后台代码 返回了List<Map<String, String>>的json格式的数据
/**
* 得到下级下拉框 mConfigController.do?selectProduct
*/
@RequestMapping(params = "selectProduct")
@ResponseBody
public AjaxJson selectProduct(String parentId, HttpServletRequest request) {
List<Combo> listcb = productLevelSelectService.getProductLevel(parentId);
List<Map<String, String>> list = new ArrayList<>();
for (Combo vo : listcb) {
LinkedHashMap<String,String> mp = new LinkedHashMap<>();
mp.put("key",vo.getId());
mp.put("value",vo.getText());
list.add(mp);
}
return list;
}
二
2018-09-08 16:16:35
select2
这个应用了select2的样式,很好的一个样式
https://select2.org/ demo很全的,
首先引用它的资源 https://select2.org/getting-started/installation
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
就可以直接用了
<select id="selectId" style="width: 180px;height: 20px">
<option></option>
<c:forEach items="${factorys}" var="maps">
<option value="${maps['factory_code']}"<c:iftest="${maps['factory_code']==code}">selected="selected"</c:if>>
<c:out value="${maps['factory_name']}"></c:out>
</c:forEach>
</select>
上面主要使用了强大的el表达式,可以回显上次选中的数据,后台需要把上次选中的数据code传过来
js 初始化select2
$(document).ready(function() {
$("#selectId").select2({
placeholder:'--请选择工厂--',
width:'style',
});
});
后台返回的数据,简单省略
List<Map<String,String>> factorys=·····
modelAndView.addObject("factorys",factorys);
modelAndView.addObject("code",code);
数据时直接从数据库查出来不用再处理的,直接用List<Map<String,String>>就可以封装好,我的数据库框架用的是minidao
sql
select t.FACTORY_NAME,t.FACTORY_CODE from FACTORY t
三
3.1
三个selec下拉框,分别为第一工厂,第二工厂,第三工厂,这三个数据源都是一样的,
不能选择重复数据,最少选中一个,
以为select2的样式很好,还支持搜索数据,所以我们继续用这个select2
<select id="firstFactoryCode" name="firstFactoryCode">
<option></option>
</select>
js代码
$(document).ready(function() {
$("#firstFactoryCode").select2({
placeholder:'--请选择工厂--',
width:'style'
});
//初始化和数据远程加载不要写在一块,否则样式和数据加载都有问题
$('#firstFactoryCode').select2({
ajax: {
url: 'factoryController.do?searchFactory',
dataType: 'json'
// Additional AJAX parameters go here; see the end of this chapter for the full code of this example
}
});
});
需要注意几点,select2远程请求数据填充到select时
返回的数据必须是固定格式,当然这也可以自定义
Select2数据格式 https://select2.org/data-sources/formats
Ajax(远程数据) https://select2.org/data-sources/ajax
我返回的json数据如下
{
"results": [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2"
}
],
"pagination": {
"more": true
}
}
这样写还是有问题 placeholder未生效 远程数据加载后查询的时候是实时查询的,性能不好,还会报underind错误,
我也很纳闷。它为什么要实时查询
下面是后台代码
@ResponseBody
@RequestMapping(params = "searchFactory")
public JSONObject searchFactory(){
List<Map<String, Object>> maps = factoryService.searchFactory();
List<Map<String,String>> textId= new ArrayList<>();
for (Map<String, Object> map : maps) {
HashMap hm = new HashMap();
hm.put("id",map.get("FACTORY_CODE"));
hm.put("text",map.get("FACTORY_NAME"));
textId.add(hm);
}
JSONObject jsonObject = new JSONObject();
jsonObject.put("results",textId);
return jsonObject; //数据格式要求很严格
}
3.2
select2 支持本地数据
2018-09-10 11:46:36
var data = [
{
id: 0,
text: 123
},
{
id: 1,
text: '456'
}
];
$("#firstFactoryCode").select2({
placeholder: '--请选择工厂--',
width: 'style',
data:data
});
为了解决3.1中下拉框输入数据的实时查询的问题,我们用本地数据填充select2,这样就没用远程查询的问题了
后台得改一下
@ResponseBody
@RequestMapping(params = "searchFactory")
public List<Map<String,String>> searchFactory(){
List<Map<String, Object>> maps = factoryService.searchFactory();
List<Map<String,String>> textId= new ArrayList<>();
for (Map<String, Object> map : maps) {
HashMap hm = new HashMap();
hm.put("id",map.get("FACTORY_CODE"));
hm.put("text",map.get("FACTORY_NAME"));
textId.add(hm);
}
return textId;
}
返回的json数据如下
[{"id":"2411","text":"西安工厂"},{"id":"2420","text":"乌鲁木齐虚拟工厂"},{"id":"2421","text":"乌鲁木齐工厂"}}
<select id="firstFactoryCode" name="firstFactoryCode">
<option></option>
</select>
js 拼接后台返回的json数据,本地填充select2
$(document).ready(function() {
$.post('factoryController.do?searchFactory',{},function (data) {
var dataArray=new Array();
$.each(data,function (i,v) {
dataArray.push({id:v.id,text:v.text})
})
$("#firstFactoryCode").select2({
placeholder: '--请选择工厂--',
width: '160px',
data:dataArray
});
},"json");
})
但是这样他的宽度还是有些问题,不美观,二中的select2样式才是最好的
_____________________________________________________________________________________________________
再改造下
<select id="firstFactoryCode" name="firstFactoryCode"><option></option></select>
js
$(document).ready(function() {
$.post('factoryController.do?searchFactory',{},function (data) {
//$('#firstFactoryCode').append("<option value>---请选择---</option>");
$.each(data,function (i,v) {
$('#firstFactoryCode').append("<option value='"+v.id+"'>"+v.text+"</option>");
})
$("#firstFactoryCode").select2({placeholder: "请选择...",allowClear:true});
},"json");
})
ok
________________________________________________________________________________________
这下我们可以回到前面的需求上了
1.0
以为三个工厂都是一样的数据源,我们ajax只需请求一次就好了
$(document).ready(function() {
$.post('factoryController.do?searchFactory', {}, function (data) {
//$('#firstFactoryCode').append("<option value>---请选择---</option>");
var innerOptionHtml;
$.each(data, function (i, v) {
$('#firstFactoryCode').append("<option value='" + v.id + "'>" + v.text + "</option>");
})
innerOptionHtml = document.getElementById('firstFactoryCode').innerHTML
$('#secondFactoryCode').append(innerOptionHtml);
$('#thirdFactoryCode').append(innerOptionHtml);
$("#firstFactoryCode").select2({placeholder: "请选择...", allowClear: true});
$("#secondFactoryCode").select2({placeholder: "请选择...", allowClear: true});
$("#thirdFactoryCode").select2({placeholder: "请选择...", allowClear: true});
}, "json");
});
————————————————————————————————————————————————————————
2018-09-10 12:20:04
select2 没有onselect事件 有 onchange事件
当选择了重复数据时,我们要清除它当前下拉框选中的值,程序清除选中值时出现问题 事件冒泡问题
//清除选中值
$("#firstFactoryCode").val(null).trigger('change')
//select中定义了onchange事件
function firstChange(event) {
event.stopPropagation();
firstFactoryCode =$('#firstFactoryCode option:selected').val();verifyFactory();
console.log("1")
if(tflag){
tflag=false
// $("#firstFactoryCode").val(null).trigger('change')
}
}
function secondChange(event) {
event.stopPropagation();
console.log("2")
secondFactoryCode=$('#secondFactoryCode option:selected').val();verifyFactory();
if(tflag){
tflag=false
// $("#thirdFactoryCode").val(null).trigger('change')
}
}
function thirdChange(event) {
event.stopPropagation();
console.log("3")
thirdFactoryCode=$('#thirdFactoryCode option:selected').val();verifyFactory();
if(tflag){
tflag=false
// $("#thirdFactoryCode").val(null).trigger('change')
}
}
function verifyFactory(){
console.log(firstFactoryCode)
console.log(secondFactoryCode)
console.log(thirdFactoryCode)
console.log(tflag="-------------")
if (firstFactoryCode == secondFactoryCode ||
firstFactoryCode==thirdFactoryCode ||
secondFactoryCode==thirdFactoryCode) {
tip("所选工厂重复,请重新选择");
tflag=true
}else {
tflag=false
}
}
__________________________
获取选中值
function firstChange() {
firstFactoryCode =$('#firstFactoryCode option:selected').val();
}
$("#firstFactoryCode").on('select2:select', function (e) {
firstFactoryCode = $(e.target).val();
})
l两种方式都可以获取到
——————————
禁止事件传播
<span onclick="dont(event)">123</span>
function dont(event) {
event.stopPropagation();
alert("The span element was clicked.");
}
function firstChange(event) {
event.stopPropagation();
alert("1")
$("#firstFactoryCode").val(null).trigger('change')
}
——————————————————————————————————
2018-09-10 19:06:44
清除select当前选中项--ok
function firstChange(event) {
firstFactoryCode =$('#firstFactoryCode option:selected').val();
debugger;
if(firstFactoryCode=="") firstFactoryCode=1;
if(verifyFactory()) $("#firstFactoryCode").val(null).trigger('change');
}
function secondChange(event) {
secondFactoryCode=$('#secondFactoryCode option:selected').val();
if(secondFactoryCode=="") secondFactoryCode=2;// 若没有这句 当2、3 select 都与1重复,则secondFactoryCode thirdFactoryCode两个值又都被置为“”,一直重复,循环调用
if(verifyFactory()) $("#secondFactoryCode").val(null).trigger('change');
}
function thirdChange(event) {
thirdFactoryCode=$('#thirdFactoryCode option:selected').val();
if(thirdFactoryCode=="") thirdFactoryCode=3;//
if(verifyFactory()) $("#thirdFactoryCode").val(null).trigger('change');
}
function verifyFactory(){
console.log(firstFactoryCode)
console.log(secondFactoryCode)
console.log(thirdFactoryCode)
if (firstFactoryCode == secondFactoryCode ||
firstFactoryCode==thirdFactoryCode ||
secondFactoryCode==thirdFactoryCode) {
tip("所选工厂重复,请重新选择");
return true;
}else {
return false;
}
}
2018-09-13 11:16:11
默认值选中
选择的数据在前端是要回显的
<input id="oneFactory" type="hidden" value="${vo.firstFactoryCode}">
$(document).ready(function() {
$('#firstFactoryCode').val($('#oneFactory').val()); // Select the option with a value of '1'
$('#firstFactoryCode').trigger('change'); // Notify any JS components that the value changed
}
四
easyui的combobox解决三的需求
<tr>
<td align="right">
<label class="Validform_label">
<span style="color: red">* </span>首选发货工厂:
</label>
</td>
<td class="value">
<input id="firstFactoryCode" class="inputxt" name="firstFactoryCode" disabled="disabled">
</td>
</tr>
$("#firstFactoryCode").combobox({
url:"factoryController.do?searchFactory",
valueField:'FACTORY_CODE',
textField:'FACTORY_NAME',
method:'post',
onLoadSuccess:function(){
firstFactoryCode=$("#firstFC").val();
$('#firstFactoryCode').combobox('setValue',firstFactoryCode);
$("#firstFactoryCode").val(firstFactoryCode);
},
onSelect:function () {
firstFactoryCode =$("input[name='firstFactoryCode'] :last").val();
$("#firstFactoryCode").val(firstFactoryCode);
if(false==verifyFactory()){
$("#firstFactoryCode").combobox('setValue',"")
}
}
})
五
jstl 对 map的list的遍历
<c:forEach items="${productList}" var="map">
${map.id}=${map.name}
//遍历的是一个个map 它没有 key value 属性 只能根据map['key的名字取值 区分大小写']或map.key的名字取值 区分大小写'
</c:forEach>
<c:forEach items="${productList}" var="map">
<c:forEach items="${map}" var="entry">
${entry.key}=${entry.value}
//遍历的是一个个entry 它有key value 属性 可以直接根据 ${entry.key}=${entry.value}取值或 ${entry['key']} 区分大小写 错误写法${entry[key]}
</c:forEach>
</c:forEach>
l六
<span>选择工厂: <span style="color: red;">*</span></span>
<select id="pp">
<option value="1">--请选择工厂--</option>
//List<Map<String,String>> factorys 返回工厂名和工厂编码
<c:forEach items="${factorys}" var="maps">
<option value="${maps['factory_code']}"
<c:if test="${maps['factory_name']==code}">selected="selected"</c:if>
><c:out value="${maps['factory_name']}"></c:out>
</c:forEach>
</select>
七
select 二级级联
选择不同的工厂,二级下拉框变为对应库位的选择
< select id="gc" onchange = "goChange(this)" style = "width: 170px" >
<c: forEach items="${factorys}" var="maps">
<option value="${maps['factory_code']}" <c:if test="${maps['factory_code'] == factoryCode}">selected="selected"</c: if>> <c: out value="${maps['factory_name']}"></c: out >
</c: forEach >
</select >
<select id="kw" style="width: 170px">
<c: forEach items="${storages}" var="maps">
<option value="${maps['storage_code']}" <c:if test="${maps['storage_code'] == storageCode}">selected="selected"</c: if>> ${ maps['storage_name'] }
</c: forEach >
</select >
function goChange() {
var factoryCode = $('#gc').find("option:selected").val().trim();
$.ajax({
type: "POST",
url: "ateController.do?searchStorageByFactory",
data: { factoryCode: factoryCode },
success: function (data) {
$('#kw').empty();
var html = "";
if (data.length < 1) {
return;
}
for (var i = 0; i < data.length; i++) {
html = html + "<option value='" + data[i]['factory_code'] + "'>" + data[i]['factory_name'] + "</option>"
}
$('#kw').html(html);
},"json"
});
}
八
2018-11-17 14:10:01
jquery对select的操作
$("#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
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id").prepend("<option value='0'>请选择</option>");//为Select插入一个Option(第一个位置)
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
var selectText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
var selectValue=$("#select_id").val(); //获取Select选择的option Value
var selectIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex= $("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery("#select_id").empty();//清空
久
以前的一个select 太垃圾了
$.ajax({
type: "POST",
url: "sController.do?searchPhone",
data: { name: driverName },
success: function (data) {
$('#driverPhone').empty();
var html = "<option value='1' disabled='disabled' selected='selected'>请选择手机号码</option>";
var da = JSON.parse(data);
if (da.length < 1) {
return;
}
for (var i = 0; i < da.length; i++) {
html = html + "<option value='" + da[i] + "'>" + da[i] + "</option>"
}
$('#driverPhone').html(html);
}
});
十
也是一个把input动态构造成select
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.extend demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input name="day" value="Monday" width="120px">
<!--Monday Tuesday -->
</body>
<script>
var selectElement = document.createElement("select");
selectElement.style.width = "80px";
selectElement.setAttribute("field", "id");
selectElement.setAttribute("name", "day");
selectElement.setAttribute("onchange", "changeday(this)");
var days = "Monday:1,Tuesday:2".split(",")
$.each(days, function (index, mode) {
var optionElement = document.createElement("option");
var day = mode.split(":");
optionElement.text = day[0];
optionElement.value = day[1];
selectElement.appendChild(optionElement);
})
$("input")[0].parentElement.replaceChild(selectElement, $("input")[0])
function changeday(this_) {
console.log(this_);
/*
<select field="id" name="day" onchange="changeday(this)" style="width: 80px;">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
</select>
*/
console.log(this_.getAttribute("name"));//day
/*
this_.getAttribute("onchange")
"changeday(this)"
this_.getAttribute("field")
"id"
this.getSelection
ƒ getSelection() { [native code] }
this_.options
HTMLOptionsCollection(2) [option, option, selectedIndex: 1]0: option1: optionlength: 2selectedIndex: 1__proto__: HTMLOptionsCollection
this_.selectedIndex
1
this_.selectedOptions
HTMLCollection [option]0: optionlength: 1__proto__: HTMLCollection
this_.value
"2"
this_.innerText
""
this_.innerHTML
"<option value="1">Monday</option><option value="2">Tuesday</option>"
this_.textContent
"MondayTuesday"
this_.parentElement
<body style>…</body>
this_.parentNode
this_.parentElement
console.log(_this.parentElement.parentElement)
console.log(_this.value)
console.log(_this.options[_this.selectedIndex].text)
*/ }
</script>
</html>