jq實現動態下拉選擇框

在HTML頁面中，select標籤可以很方便的解決下拉選擇框的問題。但是下拉列表框中的內容，有時候需要根據某些頁面的參數發生改變，這時就需要使用jq動態生成下拉選擇框。

頁面中policyid的下拉選擇框需要根據參數flightnum來改變。policyid在顯示的時候，顯示的是名稱，但是值是其對應的id。

前端代碼如下：

<input type="text" name="flightnum" id="flightnum" />

<select name="policyid" id="policyid"></select>

下面給出一種實現方式。

前端js代碼：

                $("#flightnum").change(function(){
                     $.ajax({
                         url: "/flightBase/flightnum/"+$("#flightnum").val(),
                         dataType: "json",
                         success: function(data){
                              $('#policyid').get(0).options.length = 0;
                              $('#policyid').append('<option value="">請選擇</option>');
                              $.each(data, function(i, obj) {
                               var option = $('<option />');
                               option.val(obj.policyid);
                               option.text(obj.policyname);
                               $('#policyid').append(option);
                             });     
                         },
                         error:function(){
                            alert("Error");
                       }
                     });
                });

當flightnum輸入框的值發生改變後，policyid的下拉選擇框就會發生改變。

$('#policyid').get(0).options.length = 0;//的作用是先清空下拉列表框。

如果只是頁面第一次加載完成時，就生成下拉框，而且只生成這一次，則上面這行代碼可以不用寫。直接把ajax的代碼寫在$(function(){

//寫在這裏就可以了

$.ajax({

});

})
 

 

後端實現：

    @RequestMapping("/flightnum/{flightnum}")
    @ResponseBody
    public FlightBase findOne(@PathVariable("flightnum") String flightnum)
    {
        
        QueryObject qo = new QueryObject();
        qo.setCompanyid( userUtilService.getBelongto());
        List<Policy> policylist  = policyService.query(qo);
        Map<String, Object> map = new HashMap<String, Object>();
        for(int i=0;i<policylist.size();i++){
            map.put(i+"", policylist.get(i));
        }
        return JSON.toJSONString(map);
    }

後臺使用的是mybatis框架，QueryObject是自定義的查詢對象，用來傳遞查詢參數。