select下拉框 笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/uotail/article/details/84147549

以前记得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);
            }
        });