jsp页面中select下拉框中使用了foreach标签，并给其设置默认选项

最新推荐文章于 2023-12-22 10:51:40 发布

无他&唯手熟尔

最新推荐文章于 2023-12-22 10:51:40 发布

阅读量1.2k

点赞数 1

文章标签： java sql 数据库

本文链接：https://blog.csdn.net/pccjave/article/details/131899766

版权

需求：typeList是放在ServletContext域中，遍历该集合，当prodVo有值时，默认下拉框为prodVo 对应的值

原代码：

商品类型：
<select name="typeId" id="typeId">
    <c:forEach items="${typeList}" var="pt">
        <option value="${pt.typeId}">
            ${pt.typeName}
        </option>
    </c:forEach>
</select>

法一（极力推荐）：使用EL表达式判断

<select name="typeId" id="typeId">
    <c:forEach items="${typeList}" var="pt">
        <option value="${pt.typeId}" 
                ${not empty prodVo && prodVo.typeId == pt.typeId ? 'selected' : ''}>
            ${pt.typeName}
        </option>
    </c:forEach>
</select>

代码解释：使用${not empty prodVo}来检查prodVo是否不为空，${pt.typeId eq prodVo.typeId}来判断当前pt.typeId是否与prodVo中的typeId相等。如果相等，我们在当前的<option>标签上添加selected属性，表示默认选中该选项。改写法让我感觉到EL的轻便

法二：使用jQuery

<script>
    $(document).ready(function() {
        // 检查session中是否存在prodVo对象
        var prodVo = "${sessionScope.prodVo}";
        if (prodVo) {
            // 如果prodVo对象不为空，获取typeId并设置默认选中的选项
            var typeId = "${prodVo.typeId}";
            $('#typeId').val(typeId);
        }
    });
</script>

关键：使用jQuery的.val()方法将对应的选项设置为默认选中的状态。

法三：使用原生JavaScript

<!-- 在<head>标签中添加以下脚本 -->
<script>
    // 等待DOM加载完成
    document.addEventListener("DOMContentLoaded", function () {
        // 获取typeId选择框元素
        var typeIdSelect = document.getElementById('typeId');

        // 检查session中是否存在prodVo对象
        var prodVo = "${sessionScope.prodVo}";
        // 检查prodVo是否存在
        if (prodVo) {
            var typeId = "${prodVo.typeId}";
        }

        // 遍历typeList并填充下拉框选项
       
        <c:forEach items="${typeList}" var="pt">
            var option = document.createElement("option");
            // 设置新的 <option> 元素的值和文本，整数型获取值不用双引号
            option.value = ${pt.typeId};
            option.text = "${pt.typeName}";
            if (prodVo && ${pt.typeId} == typeId) {
                option.selected = true;
            }
            // 将 <option> 元素添加到指定的 <select> 元素中，新的选项就会显示在下拉框中。
            typeIdSelect.appendChild(option);
        </c:forEach>
    });
</script>

<!-- html页面可动态生成 -->
<select name="typeId" id="typeId">
    <!-- 在服务器端填充选项 -->
    <!-- <option>元素将在服务器端使用相应的数据进行填充 -->
</select>

简述：使用 JSTL 的 forEach 标签遍历 typeList，并将 ProductType 对象的属性值 ${pt.typeId} 和 "${pt.typeName}" 直接嵌入到 JavaScript 代码中；

无他&唯手熟尔

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jsp页面中select下拉框中使用了foreach标签，并给其设置默认选项

属性，表示默认选中该选项。改写法让我感觉到EL的轻便。直接嵌入到 JavaScript 代码中；法一（极力推荐）：使用EL表达式判断。方法将对应的选项设置为默认选中的状态。如果相等，我们在当前的。简述：使用 JSTL 的。关键：使用jQuery的。
复制链接

扫一扫