select下拉列表, 从数据库查询,动态添加选项option

1 jsp

                 <table>
                        <tr>
                            <th>编码</th>
                            <td>
                                 <select id="unBindDiseaseCode" name="unBindDisease" style="width: 200px;" reg='{"required":"true"}'>
                                    </select>
                            </td>
                        </tr>
                    </table>


2  js

var setupDisease = (function() {
    $(function() {  
        //页面加载完成后执行代码,执行【传染病名称的再拼接】
        load.pageLoad({
            callBack : function(){
                queryDisease();
            }      
        });

    });

// 数据库查询下拉内容
    function queryDisease() {
        $("#unBindDiseaseCode").append('<option value="">' + "请选择" + '</option>');
        $.getJsonByUrl({
            url : "/idm/set/queryDiseaseJson",
            callback : function(data) {
                $.each(data.icds,function(key,values){
                    $("#unBindDiseaseCode").append('<option value="'+ key +'">' + key + '</option>');
                });
            }
        });
    };
   
    //实时跟新下拉列表选项 :先清除option   .html(""); 再重新查询
    function unbind() {

          $("#unBindDiseaseCode").html("");
           queryDisease();

    };

    return {
    }
})();


3 java

/**
    * 获取JSON格式
    * @param model
    * @return
    * @throws IOException
    */
   @RequestMapping("/queryDiseaseJson")
   public String queryDiseaseJson(ModelMap model) throws IOException { 
       List<DicItem> dicItems = mdmDictionaryService.getDicItems(new Criteria(Dictionary.DIC_CODE, "CV0501017").add("icdCode", OP.UEMPTY, null));
       JSONObject icdJsonObject = getDiseaseJson(dicItems);
       Map<String, Object> map = new HashMap<String, Object>();
       map.put("icds", icdJsonObject);
       return EHRMessageUtil.returnMsg(model, map);
   }

 private JSONObject getDiseaseJson(List<DicItem> DicItem) {
        int length = diseases.size();
        String currentCode = "";
        String currentName = "";
        JSONObject jsonObject = new JSONObject();
        for (int i = 0; i < length; i++) {
            Disease item = DicItem.get(i);
            currentCode = item.getIcd10main();
            currentName = item.getDiseaseName();   
            jsonObject.put(currentCode, currentName);
        }
        return jsonObject;
    }






如果你不想使用数据库,可以将下拉列表选项数据保存在一个 JSON 文件中,然后通过 AJAX 加载该文件并使用 JavaScript 动态创建下拉列表。以下是一个简单的示例代码: HTML: ```html <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区县</option> </select> ``` JavaScript: ```javascript // 加载省份数据 $.getJSON('province.json', function(data) { var options = '<option value="">请选择省份</option>'; $.each(data, function(index, item) { options += '<option value="' + item.code + '">' + item.name + '</option>'; }); $('#province').html(options); }); // 省份改变时加载城市数据 $('#province').change(function() { var provinceCode = $(this).val(); if (provinceCode) { $.getJSON('city.json', {province: provinceCode}, function(data) { var options = '<option value="">请选择城市</option>'; $.each(data, function(index, item) { options += '<option value="' + item.code + '">' + item.name + '</option>'; }); $('#city').html(options); }); } else { $('#city').html('<option value="">请选择城市</option>'); } }); // 城市改变时加载区县数据 $('#city').change(function() { var cityCode = $(this).val(); if (cityCode) { $.getJSON('district.json', {city: cityCode}, function(data) { var options = '<option value="">请选择区县</option>'; $.each(data, function(index, item) { options += '<option value="' + item.code + '">' + item.name + '</option>'; }); $('#district').html(options); }); } else { $('#district').html('<option value="">请选择区县</option>'); } }); ``` JSON 文件格式示例: ```json // province.json [ {"code": "110000", "name": "北京市"}, {"code": "120000", "name": "天津市"}, {"code": "130000", "name": "河北省"}, {"code": "140000", "name": "山西省"}, ... ] // city.json { "110000": [ {"code": "110100", "name": "市辖区"}, {"code": "110200", "name": "县"} ], "120000": [ {"code": "120100", "name": "市辖区"}, {"code": "120200", "name": "县"} ], "130000": [ {"code": "130100", "name": "石家庄市"}, {"code": "130200", "name": "唐山市"}, ... ], ... } // district.json { "110100": [ {"code": "110101", "name": "东城区"}, {"code": "110102", "name": "西城区"}, {"code": "110105", "name": "朝阳区"}, ... ], "110200": [ {"code": "110228", "name": "密云县"}, {"code": "110229", "name": "延庆县"} ], "120100": [ {"code": "120101", "name": "和平区"}, {"code": "120102", "name": "河东区"}, {"code": "120103", "name": "河西区"}, ... ], ... } ``` 以上代码示例中,我们通过 `$.getJSON()` 方法加载了三个 JSON 文件,分别保存了省份、城市和区县的数据。在加载省份数据时,我们使用 `$.each()` 方法遍历每个省份,并将其作为选项添加到省份下拉列表中。当省份改变时,我们使用 `$.getJSON()` 方法加载对应的城市数据,并使用 `$.each()` 方法遍历每个城市并添加到城市下拉列表中。当城市改变时,我们使用相同的方法加载对应的区县数据,并将其添加到区县下拉列表中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值