select下拉框笔记

╰+哭是因爲堅強的太久メ 2022-04-16 04:40 357阅读 0赞

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

下面是后台代码  返回了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/][https_select2.org]   demo很全的，

首先引用它的资源 [https://select2.org/getting-started/installation][https_select2.org_getting-started_installation]

就可以直接用了

<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

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][https_select2.org_data-sources_formats]

Ajax（远程数据） [https://select2.org/data-sources/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":"乌鲁木齐工厂"\}\}

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样式才是最好的

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

再改造下

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

这下我们可以回到前面的需求上了

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

2018-09-13 11:16:11  
默认值选中

选择的数据在前端是要回显的

$(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 >

# 八 #

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">
    
    </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>

[https_select2.org]: https://select2.org/
[https_select2.org_getting-started_installation]: https://select2.org/getting-started/installation
[https_select2.org_data-sources_formats]: https://select2.org/data-sources/formats
[https_select2.org_data-sources_ajax]: https://select2.org/data-sources/ajax