下拉列表默认选中指定条目的实现

最新推荐文章于 2022-08-26 11:29:42 发布

Oxygenzzz

最新推荐文章于 2022-08-26 11:29:42 发布

阅读量4.9k

点赞数 1

分类专栏：前端 JavaScript 文章标签：下拉列表

本文链接：https://blog.csdn.net/qq_39056805/article/details/80393914

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

适用场景：

搜索条件的回显

下拉列表：

<select name="category" id="category">
    <option value="" selected="selected">--选择商品类别--</option>
    <option value="文学">文学</option>
    <option value="生活">生活</option>
    <option value="外语">外语</option>
    <option value="经营">经营</option>
    <option value="励志">励志</option>
    <option value="社科">社科</option>
    <option value="学术">学术</option>
</select>

<body>标签绑定onload事件：

<body οnlοad="setProductCategory('${product.category}')">

${product.category }为后台传过来的要默认选中的条目

JS代码：

        function setProductCategory(t) {
		var category = document.getElementById("category");
		var ops = category.options;
		for ( var i = 0; i < ops.length; i++) {
			if (ops[i].value == t) {
				ops[i].selected = true;
				return;
			}
		}
	};

上面写的是固定下拉列表的默认选中实现，接下来说一下动态下拉列表默认选中的实现：

相对于上面的，这个就更加简单了：

<select  name="dept_id" style="width:100px;">
    <option value="">--部门选择--</option>
    <c:forEach items="${requestScope.depts }" var="dept">
        <c:choose>
            <c:when test="${employee.dept.id == dept.id }">
                <option value="${dept.id }" selected>${dept.name }</option>
            </c:when>
            <c:otherwise>
                <option value="${dept.id }">${dept.name }</option>
            </c:otherwise>
        </c:choose>
    </c:forEach>
</select>