第三天总结 之 商品管理界面的实现 之 页面中 下拉框问题的解决

页面中下拉框问题的解决

在这里插入图片描述
在页面中 点击商品类型这个图标 会出现下拉框 展示所有的商品类型 然后通过选择的 类型 来作为 查询时的一个条件
即 当不选或选择展示所有商品时 按照 不对这个条件进行操作
选择其他的商品类型时 会查询出含有该类型的商品

下拉框中 数据的展示与 如何点击其对应的商品类型 在servlet中查询出对应的商品类型的id

                <div class="form-group">
                    <div class="dropdown">
                        <input class="btn btn-primary dropdown-toggle" type="button"
                               id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false" id="show" value='商品类型' ><span
                            class="mycaret"></span>
                        </button>
                        <ul id="selectSpeaker" class="dropdown-menu">
                            <li><a οnclick="showName(this,${type.id})">展示所有商品</a></li>
                            <c:forEach items="${typeList}" var="type"  >
                                <li><a οnclick="showName(this,${type.id})">${type.typename}</a></li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
                <!-- /btn-group -->
                <input type="hidden" class="form-control" id="typeId" name="typeId"
                       value="${goods.typeId}"> <input type="hidden"
                                                       class="form-control" disabled="disabled" id="typeName"
                                                       value="${goods.typename}" aria-label="...">

其中 前端的这部分代码为 下拉框部分的代码 其中div标签包含部分为下拉框进行的操作与其属性数据的展示 下面的两个input输入框为 隐藏的输入框 作用是 在后续的servlet中 获取数值 进行模糊查询的条件判断
在前端页面中 解决选择下拉框内容到隐藏输入框内容的方法如下

 //解决选择下拉框内容到输入框内容的问题
    function showName(obj, id) {

        var name = $(obj).text();
        // alert(id)
        if(true){
            $("#dropdownMenu2").val(name);
        }else {
            $("#dropdownMenu2").val("展示所有商品");
        }
        // alert(name)
        $("#typeName").val(name);
        $("#typeId").val(id);

    }

目的是当选择了 商品类型后 其商品类型对应的id 与name 将其存放到div后的两个隐藏式的输入框中

而下拉框中的属性 是通过其中的foreach遍历 从作用域中读取typeList中的数据展示的
在这里插入图片描述
而typeList的属性值是通过el表达式 在前端 通过调用后端service层的方法 获取所有的商品类型 然后将其返回的list集合 存放到request域中
在这里插入图片描述
从而能够点击下拉框展示商品类型的数据

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值