可编辑可自动匹配的联动下拉框实现

来源：互联网发布：js禁止文本框输入编辑：程序博客网时间：2024/04/29 16:52

html代码

       <tr>              <th>城市列表：</th>              <td>                   <select name="project.city_id" class="easyui-combobox" data-options="valueField:'cityId',textField:'name'" id="cityId">                        <option value="0">请选择</option>                          #if($!{cityList})                             #foreach($city in $!{cityList})                               <option id="syncCityId_$!{city.city_site_id}" value="$!{city.city_site_id}" syncCityId="$!{city.sync_city_site_id}" #if($!{city.city_site_id} == $!{project.city_id})selected#end>$!{city.name}</option>                             #end                          #end                   </select>                  <span style="color:red">$!{errorCity}</span>              </td>            </tr>            <tr>              <th>项目场馆：</th>              <td>  <select id="venueId" name="project.venue_id" class="easyui-combobox" data-options="" style="height: 25px;"><option value="0">请选择</option>                  #if($!{venueList})                     #foreach($venue in $!{venueList})                       <option value="$!{venue.venue_id}" #if($!{venue.venue_id} == $!{project.venue_id})selected#end>$!{venue.venue_name}</option>                     #end                  #end    </select>    <span style="color:red">$!{errorVenue}</span></td>            </tr>

js代码

$().ready(function() {$('#cityId').combobox({onSelect:function(msg) {  getVenues(msg.cityId);}});function getVenues(cityId){var syncCityId = $('#syncCityId_'+cityId).attr('syncCityId');jQuery.getJSON('$contextPath/ajax/getVenues.do',{cityId:syncCityId},function(json){         if(json.isLogin==false){             document.location.href='$!contextPath/admin/login.do';         }else{$('#venueId').combobox({          data:json.venues,valueField:'venue_id',textField:'venue_name'          }).combobox('clear');         }     });}})

后台代码

    private void setInitProjectInfo() {        /*---------------------页面下拉列表begin---------------------*/        // 分类        List<ProjectCategory> projectCategoryList = projectCategoryService.getAllProjectCategories().resultData;        // 场馆        List<Venue> venueList = venueService.getVenues().getResultData();        // 城市站        List<CitySite> cityList = citySiteService.getAllCitySite().getResultData();        /*---------------------页面下拉列表end---------------------*/        this.add("projectCategoryList", projectCategoryList);        this.add("venueList", venueList);        this.add("cityList", cityList);    }

后台代码为从数据库中读取数据的代码
所有数据全部存于数据库

由于时间原因，写的不是很详细，有看不懂的留言评论即可！

0 0