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。