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

页面中下拉框问题的解决

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

下拉框中 数据的展示与 如何点击其对应的商品类型 在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域中

从而能够点击下拉框展示商品类型的数据