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

秒速五厘米 2022-05-24 05:18 154阅读 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 条评论，154人围观）

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

相关阅读

相关 jQuery获得select下拉列表选中项索引

在学习jQuery如何获取select选中的文本和值的时候发现还可以获取其选中项的索引，于是搜索了一下并记录。 $('\selectOne').find('optio

水深无声/ 2024年02月19日 14:22/ 0 赞/ 74 阅读

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

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

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

相关 Select Form List By Index关键字——模拟通过下拉列表的Index来选中指定的下拉列表的选项...

Select Form List By Index关键字——模拟通过下拉列表的Index来选中指定的下拉列表的选项；该关键字接收\[ locator | \indexe

太过爱你忘了你带给我的痛/ 2023年10月02日 08:30/ 0 赞/ 18 阅读

相关 Select Form List关键字——用来模拟从指定的下拉列表中选择指定的下拉列表选项...

Select Form List：用来模拟从指定的下拉列表中选择指定的下拉列表选项。该关键字接收\[ locator | \items \]多个参数，locator可以通过

阳光穿透心脏的1/2处/ 2023年10月02日 08:27/ 0 赞/ 22 阅读

相关 Select Form List By Label关键字——模拟通过下拉列表的Label来选中指定的下拉列表的选项...

Select Form List By Label关键字——模拟通过下拉列表的Label来选中指定的下拉列表的选项；该关键字接收\[ locator | \la

喜欢ヅ旅行/ 2023年10月02日 08:26/ 0 赞/ 25 阅读

相关 Select Form List By Value关键字——模拟通过下拉列表的Value值来选中指定的下拉列表的选项...

Select Form List By Value关键字——模拟通过下拉列表的Value值来选中指定的下拉列表的选项该关键字接收\[ locator | \va

末蓝、/ 2023年10月02日 08:26/ 0 赞/ 19 阅读

相关纯CSS实现下拉列表

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

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

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

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

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

相关 jquery 实现的select下拉列表

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

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

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

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

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