java web 项目中封装的下拉列表小组件：实现下拉列表使用者前后端0行代码 ...

最新推荐文章于 2023-07-24 14:33:10 发布
最新推荐文章于 2023-07-24 14:33:10 发布
阅读量1.8k 收藏 1
点赞数
文章标签： java 前端 后端 ViewUI
原文链接：https://yq.aliyun.com/articles/698765
版权

导读：

主要从4个方面来阐述，1：背景；2：思路；3：代码实现；4：使用

一：封装背景

      像easy ui 之类的纯前端组件，也有下拉列表组件，但是使用的时候，每个下拉列表，要配一个URL ,以及设置URL反回来的值和 select 的text ，和value 的对应关系 ，这有2个问题：一使用者必须知道URL ，二，如果页面有10个下拉表表，要请求后台10次，肯定影响性能，而我想要的是使用者只要申明用哪个数据字典就行了，其他根本不用操心,另外加上在做itest开测试测试管理项目的时候，有几个页面，特别多下拉列表，且是动态数据，到处都有处理下拉表列表，后台代码还好，前端到处都要用JS处理，就算是用vue ，或理angular JS 一样要处理，我这人又很懒, 最怕重复的代码，千女散花似的散落在各个角落中，一不做，二不休干脆不如简单的写一个组件（前后端都有的），让使用者前后端0行代码。我们先来看看一下，itest 开源测试管理项目中这个界面，下拉列表，多得头大，处理不好，会很慢。可以在这体验这个多下拉列表页面（点测试，然后选择一个项目，然后点缺陷管理,再点增加），体验地址:https://itest.work/rsf/site/itest/product/index.html   然后点在线体验 

 

 二：封装实现思路

     (1) 后端,第1步，字典对像维护：项目中所有字典放一张表中,定义了一个完整的父类,子类只要通过@DiscriminatorValue 注解标明某个字典,在字典分类字段上的值就行

    (2) 后端,第2步，写一个初始化字典的工具类，主要完成的功能，一是缓存字典数据，二提供，把某个list 的对像中的字典属性转换为他的名称，如把性别中的0转为“男”,1 转为女，这个转换主要是为前端 表格组件用，在后台把转换了，不用前台再加format 之类的函数处理

    (3) 后端,第3步，对前端实现rest 接口，返回下拉列表数据，参数：前端下拉表的元素ID用逗号拼成的串，，以及他对应的字典类型和逗号拼成的串，这么做是实现，批量一次以MAP返回前端所有下拉列表的数据，Map<String,List<BaseDictionary>>，key 为字前端下拉表列元素的ID，value 是一个字典对像的list

    (4) 写一个公用JS ，描扫页面中的下拉列表对像，获取其ID,同时 获取，下拉表中自定义的用于标识字典类型的html 属性,把这些按对应的顺序拼为(3)中描述的两个以逗号隔开的字符串

  

三：代码实现

      (1) BaseDictionary   抽像类定义字典对像的通用的方法

      (2) Dictionary 继承 BaseDictionary   ,Dictionary是所有字典类对像的实体类父类，采用子类和父类共一张表的策略  ，Dictionary   类上的注解如下

 

　　  @Entity
         @Table(name = "t_dictionary")
           @Inheritance(strategy = InheritanceType.SINGLE_TABLE)
           @DiscriminatorColumn(
              name = "type_name",
               discriminatorType = DiscriminatorType.STRING
            )
         @DiscriminatorValue(value = "all")

      其他字典类，只要申明一下就行，如下面的姓别，主要是要用 DiscriminatorValue注解申明t_dictionary表中的type_name 字段的值为什么时表示这个子类，下面示例表示  type_name   为Gender 表示姓别的字典类


@Entity
@DiscriminatorValue("Gender")
public class Gender extends Dictionary{

}


 (3) DictionaryCacheServiceImpl ，实现DictionaryCacheService 接中，同时定义一个init 方法，来加载字典到缓存 通过@PostConstruct 注解告诉spring ，构造这个对像完后成，就执行init 方法

 (4) DictionaryHolderService  ，实现public Map<String, String> getDictionaryHolder() ，方法，一个静态的MAP， key 是字典类型，也就是具体的字典子类中，@DiscriminatorValue注解的值，value 就是 字典包名的类名，DictionaryCacheServiceImpl，通过这接口，知道有哪些字典类，然后加载到缓存中，后续版本我们通过spi 实现 DictionaryHolderService ,有老项目， 他们直接在 applicationContext.xml 中配置一个MAP ，

 (5) DictionaryRest  ，提供rest 接口供前端调用

 (6) 前端公用JS ，只要引入该JS，他会自动扫描页面上的下拉表组件，后来我们实现了jquery 版本，easy ui 版，angular 版本

另外，现在公司内部，我们字典，后端做成两部分，上面描述的我称作自定议字段，是项目内部字典，还有一个公共字典，在前端，在自定义HTML 属性中，除了字典属性外，还有一个是自定议的，还是公用的；公用的做成一个微服务了，只要POM中引入相关包就行了

   

上面简单回顾了一个实现思路,下面就上代码:

BaseDictionary


public abstract class BaseDictionary {

    public abstract String getDictId();

    public abstract String getDesc();

    public abstract String getValue();

}


Dictionary

 

/**
 * <p>标题: Dictionary.java</p>
 * <p>业务描述:字典公共父类</p>
 * <p>公司:itest.work</p>
 * <p>版权:itest 2018 </p>
 * @author itest  andy 
 * @date 2018年6月8日
 * @version V1.0 
 */
@Entity
@Table(name = "t_dictionary")
@Inheritance(strategy = InheritanceType.SINGLE_TABLE)
@DiscriminatorColumn(
    name = "type_name",
    discriminatorType = DiscriminatorType.STRING
)
@DiscriminatorValue(value = "all")
public class Dictionary extends BaseDictionary implements Serializable {
    

    private static final long serialVersionUID = 1L;
    
    private Integer dictId;
    private String desc;
    private String value;
    
    public Dictionary() {
    
    }
    
    public Dictionary(Integer dictId) {
        this.dictId = dictId;
    }
    
    public Dictionary(Integer dictId, String desc, String value) {
        this.dictId = dictId;
        this.desc = desc;
        this.value = value;
    }
    
    /**  
     * @return dictId 
     */
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    @Column(name = "ID", unique=true, nullable=false, length=32)
    public Integer getDictId() {
        return dictId;
    }

    /**  
     * @param dictId dictId 
     */
    public void setDictId(Integer dictId) {
        this.dictId = dictId;
    }

    /**  
     * @return desc 
     */
    @Column(name = "lable_text", length = 100)
    public String getDesc() {
        return desc;
    }

    /**  
     * @param desc desc 
     */
    public void setDesc(String desc) {
        this.desc = desc;
    }

    /**  
     * @return value 
     */
    @Column(name = "value", length = 100)
    public String getValue() {
        return value;
    }

    /**  
     * @param value value 
     */
    public void setValue(String value) {
        this.value = value;
    }

}

DictionaryCacheServiceImpl

 

package cn.com.mypm.framework.app.service.dictionary.impl;

import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import javax.annotation.PostConstruct;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.context.annotation.DependsOn;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import cn.com.mypm.framework.app.dao.common.CommonDao;
import cn.com.mypm.framework.app.entity.dictionary.BaseDictionary;
import cn.com.mypm.framework.app.service.dictionary.DictionaryCacheService;
import cn.com.mypm.framework.app.service.dictionary.DictionaryHolderService;
import cn.com.mypm.framework.common.SpringContextHolder;
import cn.com.mypm.framework.utils.ItestBeanUtils;
@Service("dictionaryCacheService")
@DependsOn("springContextHolder")
public class DictionaryCacheServiceImpl implements DictionaryCacheService {

    private static Log log = LogFactory.getLog(DictionaryCacheServiceImpl.class);

    private static DictionaryHolderService dictionaryHolder;
    /**
     * 
     */
    private static Map<String, List<BaseDictionary>> direcListMap = new HashMap<String, List<BaseDictionary>>();
    /**
     * key 为字典type value 为某类字段的map 它的key为字典value ,value这字典的名称
     */
    private static Map<String, BaseDictionary> dictionaryMap = new HashMap<String, BaseDictionary>();

    public DictionaryCacheServiceImpl() {

    }

    @PostConstruct
    @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)
    public void init() {
        try {
            if (SpringContextHolder.getBean("dictionaryHolderService") != null) {
                dictionaryHolder = SpringContextHolder.getBean("dictionaryHolderService");
            }

            Iterator<Map.Entry<String, String>> it = dictionaryHolder.getDictionaryHolder().entrySet().iterator();
            CommonDao commonDao = SpringContextHolder.getBean("commonDao");
            while (it.hasNext()) {
                Map.Entry<String, String> me = (Map.Entry<String, String>) it.next();
                List<BaseDictionary> list = commonDao.findDictionary(me.getValue());
                if (list != null) {
                    String type = me.getKey();
                    direcListMap.put(type, list);
                    for (BaseDictionary dc : list) {
                        dictionaryMap.put(type + "_" + dc.getValue(), dc);
                    }
                }
            }
        } catch (Exception e) {
            log.warn("======PLS confirm if or not configuration dictionaryHolder=====");
            log.warn(e.getMessage());
        }

    }

    /**
     * 
     * @param value
     *            字典值
     * @param type
     *            字典类型
     * @return 字典名称
     */
    public static String getDictNameByValueType(String value, String type) {
        if (dictionaryMap.get(type + "_" + value) != null) {
            return dictionaryMap.get(type + "_" + value).getDesc();
        }
        return "";

    }

    /**
     * 
     * @param type
     *            字典类型
     * @return 字典列表
     */
    public static List<BaseDictionary> getDictListByType(String type) {

        return direcListMap.get(type) == null ? null : direcListMap.get(type);
    }

    public Map<String, BaseDictionary> getDictionaryMap() {
        return dictionaryMap;
    }

    public Map<String, List<BaseDictionary>> getDictionaryListMap() {
        return direcListMap;
    }
    
        /**
     * 把list中字典表中代码值转换为他的名称
     * 
     * @param list
     * @param praAndValueMap
     *            key为list中object的表示字典表的属性 (支持通过点来多层次的属性如 dto.user.id或是无层次的id),
     *            value为他的类型，如学历，性别
     */
    @Override
    public void dictionaryConvert(List<?> list, Map<String, String> dictMapDesc) {
        if (list == null || list.isEmpty()) {
            return;
        }
        if (dictMapDesc == null || dictMapDesc.isEmpty()) {
            return;
        }

        for (Object currObj : list) {
            this.dictionaryConvert(currObj, dictMapDesc);

        }
    }
    
    public void dictionaryConvert(Object dictObj,
            Map<String, String> dictMapDesc) {
        if (dictObj == null) {
            return;
        }
        if (dictMapDesc == null || dictMapDesc.isEmpty()) {
            return;
        }
        try {
            Iterator<Entry<String, String>> it = dictMapDesc.entrySet()
                    .iterator();
            String[] propertys = null;
            while (it.hasNext()) {
                Entry<String, String> me = it.next();
                propertys = me.getKey().split("\\.");
                Object dictValue = ItestBeanUtils.forceGetProperty(dictObj,
                        propertys[0]);
                if (dictValue == null) {
                    continue;
                }
                if (propertys.length == 1) {
                    ;
                    ItestBeanUtils.forceSetProperty(dictObj, me.getKey(),
                            DictionaryCacheServiceImpl.getDictNameByValueType(
                                    (String) dictValue, me.getValue()));
                } else {
                    Object laseLayerObj = null;
                    for (int i = 1; i < propertys.length; i++) {
                        if (i != propertys.length - 1
                                || (propertys.length == 2 && i == 1)) {
                            laseLayerObj = dictValue;
                        }

                        dictValue = ItestBeanUtils.forceGetProperty(dictValue,
                                propertys[i]);

                        if (dictValue == null) {
                            break;
                        }
                    }
                    if (dictValue != null && laseLayerObj != null) {
                        ItestBeanUtils.forceSetProperty(laseLayerObj,
                                propertys[propertys.length - 1],
                                DictionaryCacheServiceImpl
                                        .getDictNameByValueType(
                                                (String) dictValue,
                                                me.getValue()));
                    }
                }
                dictValue = null;
            }
        } catch (NoSuchFieldException e) {
            logger.error(e.getMessage(), e);
        }
    }


}

DictionaryRest

 

package cn.com.mypm.framework.app.web.rest.dict;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import cn.com.mypm.framework.app.entity.dictionary.BaseDictionary;
import cn.com.mypm.framework.app.entity.vo.dict.BatchLoad;
import cn.com.mypm.framework.app.service.common.BaseDic;
import cn.com.mypm.framework.app.service.dictionary.PubDicInterface;
import cn.com.mypm.framework.app.service.dictionary.impl.DictionaryCacheServiceImpl;
import cn.com.mypm.framework.common.SpringContextHolder;





@RestController
@RequestMapping("/itestAPi/dictService")
public class DictionaryRest {


    private static Log logger = LogFactory.getLog(DictionaryRest.class);

    @GetMapping(value="/find/{type}",consumes="application/json")
    public  List<BaseDictionary> find(@PathVariable("type") String type) {
        
        return DictionaryCacheServiceImpl.getDictListByType(type);
        
    }
    
    //项目内自定义字典
    @PostMapping(value="batchLoad",consumes="application/json")
    public Map<String,List<BaseDictionary>> load(@RequestBody BatchLoad batchLoad){
        if(batchLoad==null){
            return null;
        }
        if(batchLoad.getIds()==null||batchLoad.getIds().trim().equals("")){
            return null;
        }
        if(batchLoad.getDicts()==null||batchLoad.getDicts().trim().equals("")){
            return null;
        }
        String[] idsArr = batchLoad.getIds().split(",");
        String[] dictsArr =  batchLoad.getDicts().split(",");
        Map<String,List<BaseDictionary>>  resultMap = new HashMap<String,List<BaseDictionary>>(idsArr.length);
        int i = 0;
        for(String id :idsArr){
            List<BaseDictionary> currDict = DictionaryCacheServiceImpl.getDictListByType(dictsArr[i]);
            if(currDict!=null&&!currDict.isEmpty()){
                resultMap.put(id, currDict);
            }
            i++;
        }
        return resultMap;
    }
   

//公共字典 
    @PostMapping(value="pubBatchLoad",consumes="application/json")
    public Map<String,List<BaseDic>> pubLoad(@RequestBody BatchLoad batchLoad){
        if(batchLoad==null){
            return null;
        }
        if(batchLoad.getIds()==null||batchLoad.getIds().trim().equals("")){
            return null;
        }
        if(batchLoad.getDicts()==null||batchLoad.getDicts().trim().equals("")){
            return null;
        }
        PubDicInterface pubDicInterface = null ;
        try {
            pubDicInterface = SpringContextHolder.getBean("pubDicInterface");
        } catch (Exception e) {
            logger.error("pub dic no pubDicInterface implements  "+e.getMessage(),e);
            return null;
        }
        return pubDicInterface.batchLoadDic(batchLoad);
    }
}

  列举几个字典类:


@Entity
@DiscriminatorValue("AccessMode")
public class AccessMode extends Dictionary{

}

@Entity
@DiscriminatorValue("Gender")
public class Gender extends Dictionary{

}

import javax.persistence.DiscriminatorValue;
import javax.persistence.Entity;

@Entity
@DiscriminatorValue("CertificateType")
public class CertificateType extends Dictionary{

}


不一一列举了，总之后端，只要定义，字典类就行了

 

 

加载字典的公共JS ，下面是eas ui 版本，且作缺省执行的JS中要执行的方法，

 


/**
 * 批量获取页面字典数据
 */
function batDicts(opts)
{
    // action
    var url = '';
    // type 区分是公共不是项目内自定义字典
    var type = 'public';
    if(!!opts) {
if(!!opts.type) {
            type = opts.type;
        }
    }
    var dicts = [];
    var pageCombos = $(document).data("bsui-combobox")||{};
    $.each(pageCombos, function(i, n){
        if(i && n) {
            var td = i.split('^');
            if(2 === td.length) {
                if(td[0]===type && -1===$.inArray(td[1], dicts)) {
                    dicts.push(td[1]);
                }
            }
        }
    });
    if(!!url && dicts.length > 0) {
        // req params
        var params = '{"ids": "'+dicts.join(",")+'","dicts": "'+dicts.join(",")+'"}';
        // post request
        ajaxReq(url, params, '', '',{
            'type' : 'POST',
            'contentType':'application/json; charset=UTF-8'
        }).done(function(data){
            $.each(dicts, function(i,n){
                if(!!pageCombos[type+'^'+n] 
                    && !pageCombos[type+'^'+n]['getted'] 
                    && !!data[n]) {
                    pageCombos[type+'^'+n]['getted'] = true;
                    pageCombos[type+'^'+n]['data'] = data[n];
                    $.each(pageCombos[type+'^'+n]["list"], function(){
                        // 更新页面combo
                        $(this).combobox('loadData', data[n]);
                    });
                }
            });
        });
    }
}

/**
 * 一次设置页面上所有下拉列表
 */
function batCombo()
{
    batDicts({
        type: 'public',
        url: $CommonUI._PUBLIC_DICT_SERVICE_URL
    });
    batDicts({
        type: 'custom',
        url: $CommonUI._CUSTOM_DICT_SERVICE_URL
    });
}

 

四：使用

 在前端，正常使用select 组件的基本上，增加一个自定义属性 即，可，不用写任何JS代码，当然要引用公用JS

 

简单吧，前端，什么都不用了，只要定义了用什么字典及是公共字典，还是自定义的，后端，是通用的代码，只需要申明字类就 OK ，如 Gender ,有其他的，如学历等，只要后台定义一个 他的类，并用 @DiscriminatorValue 申明就行了 , 不再写任何代码  ，是不是很省事呀， easy ui ，缺省的下拉表表组件，只要写URL和两个属性，但是下拉多，一个下拉请求一次后台，这很不友好，且需要使用者知道URL，或是实现 load 的JS函数，侵入性我认为太大。

 

另外，前面gird 的数据，通知会包含量字典数据，通知会在前端通过 grid 组年中，定义format 方法，时行转行，这麻烦，转换者，还要知道如来转，所以后台字典的service 实现中中增加了一个方法，用于把list 中的的对像里的字典属性转换为其名称

 

        /**
     * 把list中字典表中代码值转换为他的名称
     * 
     * @param list
     * @param praAndValueMap
     *            key为list中object的表示字典表的属性 (支持通过点来多层次的属性如 dto.user.id或是无层次的id),
     *            value为他的类型，如学历，性别
     */
    @Override
    public void dictionaryConvert(List<?> list, Map<String, String> dictMapDesc)

weixin_34383618
关注
uniapp(全端兼容)-最新详细实现接入腾讯云IM即时通讯教程，uniapp在安卓苹果app端/小程序/h5移动端等集成使用腾讯云im插件，提供消息列表与聊天对话示例，支持发图片/私聊/实时监听消息
高级前端工程师
05-13 3600
uni-app，腾讯云IM，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，im即时通讯，腾讯云IM详细教程，如何接入腾讯IM即时通讯，使用腾讯im有没有插件，怎么使用腾讯云IM插件，tim-wx-sdk，聊天sdk，即时通讯im uniapp私聊/群聊/聊天室，实现IM即时通讯仿微信聊天功能，对接腾讯云IM+音视频，调用腾讯即时通信IM的示例，卡顿很卡不流畅，音视频，全局监听，仿微信IM，uni-huanxin-im，sdk,实现多端实时通
如何用java实现下拉菜单
12-20
如何用java实现下拉菜单
java web 下拉列表_html------3.javaWeb网页下拉列表框调用数据库数据
weixin_42501631的博客
02-12 657
packagecom.util;importjava.io.BufferedReader;importjava.io.IOException;importjava.io.InputStreamReader;importjava.net.MalformedURLException;importjava.net.URL;importjava.net.URLConnection;importnet.sf...
【示例】教你简单用Java写一个动态更新的下拉列表（无数据库）
weixin_34198797的博客
03-12 509
动态更新下拉列表 场景需求，在选择省之后出现选择的地级市名字 在之前的教程交了怎么用server配置启动 打开eclipse新建一个dynamic web projec，文件目录如下 　　首先看下index.html，遇到的所有问题都出现js里面。页面拥有连个下拉列表，表1为省选择，表2 为城市选择。当表1选中时，调用updateSelect函数，更新表2的option。值...
关于Java中的封装实现与应用浅析
长街yu巷的博客
12-08 157
@关于Java中的封装实现与应用浅析 Java项目中封装，继承，多态相信大家应该都耳熟能详了，我在这里在进行一下简单的归纳，技术大神请回避。 封装 我们需要明白我们为什么要封装，封装的到底是什么？ 先来说为什么要封装，在项目中我们为了项目运行的安全性防止恶意访问，暴力 运行项目或者违规赋值等。。。 我们通常会把项目需要用到的**属性**进行封装。 我们封装的内容就是项目需要用到的属性，封装就是对这些属性进行封装的。 封装过程 我们通常把属性统一放入一个类中，并且将其所有属性设为私有属性：pri
java web封装下拉列表
04-03
封装了页面的下拉列表,直接从后台数据库取值
java视频全套教程.txt
最新发布
02-26
- **MVC框架**：使用Spring MVC实现Web应用开发。 - **事务管理**：提供了一种声明式的事务管理方式。 ### SSH整合案例 SSH指的是Struts、Spring和Hibernate三个开源框架的组合。这部分共有75集的内容，主要讲解了...
qqfwqxlsxjz.zip_Java编程_Java__Java编程_Java_
08-09
在IT行业中，Java编程语言因其跨平台性和丰富的库支持，被广泛应用于各种系统开发，包括Web应用、Android应用以及后端服务等。本压缩包"qqfwqxlsxjz.zip"涉及的核心知识点主要集中在Java编程和MVP（Model-View-...
Thinking in Java(中文版 由yyc,spirit整理).chm
02-03
13.10 下拉列表 13.11 列表框 13.11.1 handleEvent() 13.12 布局的控制 13.12.1 FlowLayout 13.12.2 BorderLayout 13.12.3 GridLayout 13.12.4 CardLayout 13.12.5 GridBagLayout 13.13 action的替用品 13.14 程序片...
Web弹出下拉菜单
04-25
是模仿淘宝右上角的那种的下拉菜单，挺好用的，有详细说明，都能看懂，欢迎大家下载！
Ajax实现java web 中下拉列表二级联动
11-24
ajax 我们也就讲过一个小例子，这是后来经老师指点后用老师的例子改的，希望对想实现二级联动的同学有所帮助.
java web下开发二级级联下拉菜单（数据库实现的）
05-23
网上级联菜单确有不少，单大多是直接写死到jsp页面中的，本代码是用mysql的数据库实现的，希望对大家有帮助！！！
JAVA下拉列表的使用方法（代码）
12-18
JAVA下拉列表的使用方法（原代码）及具体说明
java web 下拉列表_关于web中下拉列表的几种实现方法
weixin_39623411的博客
02-16 1723
从数据库中获得数据List，将数据放到Request里面使用setAttribute(”AList”,AList)A中有2个属性(String id,String value)1.使用JSTL的forEach方式2.使用struts的标签查一下struts的api文档，可以看到select 中选项有3 taglib可以使用。第一种直接使用把所有选项写在中间。0-15 15-20 20-30 30 ...
Java Servlet实现下拉选择查询（双表）和单列模式
zhurui19940321的博客
07-24 182
页面效果加入功能懒汉模式懒汉模式加入锁机制。
html语言下拉菜单,html 中可以自定义输入的 select 下拉列表
weixin_42181693的博客
05-30 635
在项目开发中，往往有这种需求：那就是需要下拉选择已有的数据列表，当没有自己需要的数据时，往往需要去管理这些列表数据的画面去添加，或者在下拉列表后面放一个快捷按钮，先添加，然后再选。那么问题就来了，如果按照上面的操作，往往需要很多步骤，能不能当没有可选项目时，直接在下拉列表上输入呢？答案是可以的。下面就是用 JS 实现了下拉列表上自定义选项的功能，请参考。可编辑的下拉列表.cls_select_sp...
Java下拉列表联动的实现（从数据库读取数据）
热门推荐
小梨的博客
09-18 2万+
很多时候在界面布局时我们会用到下拉列表，单独的一个列表与数据库的交互很简单，今天要记录的是当有多个下拉列表联动时，该怎样获取数据，即选择第一个下拉列表的值，动态的改变第二个下拉列表乃至更多列表的值。 1、在jsp中定义第一个下拉列表，并且从servlet中获取list列表读取出option的value（此处关于EL表达式以及c标签的使用不在赘述） getShoppe()" id="bra" n
EXT中文手册：Java编程与Web开发必备资源
EXT是一个用于构建富客户端Web应用的JavaScript库，它提供了丰富的用户界面组件和强大的数据绑定机制。这本书籍旨在帮助开发者深入理解和使用EXT进行Web应用开发。 EXT简介： EXT框架以其强大的组件库和灵活的布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值