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

秒速五厘米 2022-05-24 05:18 96阅读 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>

*  $\{requestScope.depts \}：后台传过来的部门列表
 *  employee.dept.id：默认要选中的部门的id
 *  dept.id：当前遍历到的部门的id

发表评论取消回复

表情：

评论列表（有 0 条评论，96人围观）

还没有评论，来说两句吧...

相关阅读

相关【Java 进阶篇】JQuery 案例：下拉列表选中条目左右移动，打破选择的边界

![在这里插入图片描述][fe098e18bcc24ed2aaff6195ef3f5a1a.png] 在前端的舞台上，下拉列表是常见的用户交互元素，但有时候我们想要更多的交互

系统管理员/ 2024年02月18日 10:43/ 0 赞/ 12 阅读

相关如何实现省市关联的下拉列表

![format_png][] ![format_png 1][] 前言：在某些电商网站或者APP中，通常填写地址时，会有这样的功能：当我们选择的省份是“山东”时，则城市的

朴灿烈づ我的快乐病毒、/ 2022年12月27日 09:12/ 0 赞/ 146 阅读

相关 uni-app.03.初始化picker下拉列表的默认值

初始化picker下拉列表的默认值引言代码引言在文章 [01.uni-app的picker如何使用后端传递过来的对象列表作为数据源][01.u

Bertha 。/ 2022年10月23日 00:52/ 0 赞/ 630 阅读

相关 android--多级下拉列表菜单的实现

原文链接：[http://blog.csdn.net/minimicall/article/details/39484493][http_blog.csdn.net_minim

ゝ一纸荒年。/ 2022年08月12日 16:08/ 0 赞/ 272 阅读

相关实现下拉列表的一种方法

如下图，这种点击可以展开详细列表的表视图，下面阐释一种简单的实现方法: ![Center][] 实现思路如下：首先，给表视图初始化N个分区，给每个分区用一个布尔值参数来

桃扇骨/ 2022年07月28日 09:31/ 0 赞/ 139 阅读

相关纯CSS实现下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xh

向右看齐/ 2022年07月12日 06:40/ 0 赞/ 254 阅读

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

适用场景：搜索条件的回显下拉列表： <select name="category" id="category"> <option value=

秒速五厘米/ 2022年05月24日 05:18/ 0 赞/ 97 阅读

相关 jquery 实现的select下拉列表

效果如下: ![20200602153152578.png][] html <div class="select_item"> <

浅浅的花香味﹌/ 2021年07月26日 19:05/ 0 赞/ 411 阅读

相关下拉列表前端实现步骤

一组件脚本 Info.vue组件中引入teacher api import teacherApi from '@/api/teacher' 定义data

电玩女神/ 2021年07月25日 02:33/ 0 赞/ 525 阅读

相关 js如何实现下拉控制列表

js如何实现下拉控制列表重要属性介绍： ondblclick="selectOne()"：双击事件 select标签的属性： multiple="multiple"：

小灰灰/ 2020年06月03日 12:29/ 0 赞/ 686 阅读