select单选框和多选框设置默认值

在使用select单选框的时候，有时候需要配合后台传递的数据设置默认值。这时候需要js来设置select单选框的默认值。

比如我们定义了如下的单选框

<select name="locus" id="selected"  class="form-control">
                        <option>--</option>
                        <option value="DG">DG</option>
                        <option value="CA">CA</option>
                        <option value="HK">HK</option>
                        <option value="DG,CA">DG&CA</option>
                        <option value="DG,HK">DG&HK</option>
                        <option value="HK,CA">HK&CA</option>
                        <option value="HK,CA,DG">HK&CA&DG</option>
                        <option value="ALL USER">ALL USER</option>
                    </select>

 

然后传输数据的使用ModelAndView将数据从后台传递到前端。可以用jstl表达式获取到值。

设置默认值的js代码：

$(function(){
        var selectValue='${locus}';//${locus}是后台通过ModelAndView.add("locus",value)
        var select=document.getElementById("selected");//获取到单选框的位置
        var options=select.options;//获取单选框的选项
        for(var i=0;i<options.length;i++){//遍历单选框选项
            if(options[i].value==selectValue)
                options[i].setAttribute("selected",true);//找到匹配的选项，设置成已选择
        }
    })

 

多选框设置默认值的代码其实和单选差不多。

$(function(){
        var selectedArray='${statucode}';//获取到默认值
        var Array = selectedArray.split(",");//以,将selected字符创切割成字符串数组
        var mulselect=document.getElementById("ms");//找到复选框的位置
        var muloptions=mulselect.options;//获取复选框的选择项
        for(var j=0;j<selectedArray.length;j++) {
            for (var i = 0; i < muloptions.length; i++) {
                if (muloptions[i].value == Array[j]) {
                    muloptions[i].setAttribute("selected",true)//遍历字符串数组和复选框选择项，当有匹配的，就把该选项设置成已选择
                }
            }
        }
    });

然后在初始化multil-select。这里采用的的是bootstrap-multilselect。