动态下拉(类型)框关联Input(内容)框模糊查询+回显 [一看就懂]

题:下拉框挑选类型,内容框输该类型下的内容,进行模糊查询

先看效果

 (方法较为复杂,方法二较为简便,这里方法一过程写的也较为详细,喜欢研究过程的可以看一下!!!! 目的是为了让大家更好理解!)

方法一

Html代码

类型:<select onchange="Change(this)" name="did">
            <option value="0" >请选择</option>
            <option value="1" ${vo.did==1?'selected':''}>制造部编号</option>
            <option value="2" ${vo.did==2?'selected':''}>制造部名称</option>
            <option value="3" ${vo.did==3?'selected':''}>配件编号</option>
            <option value="4" ${vo.did==4?'selected':''}>配件名称</option>
        </select>
    内容:<input type="text" value="${content}" id="content" name="${contentname}"><br>

 JavaScript代码

<script>
    function Change(thiz) {
        let val = $(thiz).val();
        if(val=='1'){
            $("#content").attr("name","rzid");
        }else if(val=='2'){
            $("#content").attr("name","rzname");
        }else if(val=='3'){
            $("#content").attr("name","pnum");
        }else if(val=='4'){
            $("#content").attr("name","pname");
        }
    }
</script>

Controller控制层代码

可能很多小伙伴会想我controller里怎么要这么复杂,这里解释一下:

这里是将他们都分开来查询的,所以都要单独判断,方法二是合并查询,用一个属性查!

这也就跟你的xml里写sql语句一样,要一个个if判断!!如下图

 

 方法一到这就结束了,是不是感觉很复杂,那么多属性!controller还要那么多判断下面分享一个相对简便点的!!!

方法二(一看就懂)

Html代码

   类型:<select name="did">
            <option value="0" >请选择</option>
            <option value="1" ${vo.did==1?'selected':''}>制造部编号</option>
            <option value="2" ${vo.did==2?'selected':''}>制造部名称</option>
            <option value="3" ${vo.did==3?'selected':''}>配件编号</option>
            <option value="4" ${vo.did==4?'selected':''}>配件名称</option>
        </select>
    内容:<input type="text" name="content" value="${vo.content}">

Controller控制层

@RequestMapping(value = "list")
    public String list(Model model, QueryVo vo,String pageNum){
        PageInfo<Repait> pg = repaitService.findByList(vo,pageNum);
        model.addAttribute("pg",pg);
        model.addAttribute("vo",vo);
        return "list";
    }

XML

 

方法众多,这里仅分享我的方法!广大网友有更好的方法可@我,互动学习

有疑问尽可留言互动!!

Thanks!