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是自定义的查询对象，用来传递查询参数。