修改商品信息时给特定option添加相应selected属性的方法

用户6948990

发布于 2025-04-03 20:50:30

1830

文章被收录于专栏：wuterwuter

应用场景

商城后台，点击某个商品的“编辑”按钮之后，回显商品现有的信息，其中包含select的下拉框，需要在这个框显示出正确的商品信息。

比如点击这个编辑按钮之后

这个商品分类要显示正确的信息

方法1：EL表达式

<select name="categorySecond.csid">
    <c:forEach items="${ categoryList}" var="category" >
    <%--给相应的商品设置selected="selected"属性 --%>
        <c:if test="${category.cid == product.cid }">
            <option value="${category.cid }" selected="selected">${category.cname }</option>
        </c:if>
        <c:if test="${category.cid != product.cid }">
            <option value="${category.cid }">${category.cname }</option>
        </c:if>
    </c:forEach>
</select>

就是product的id和category的id一致时，输出带selected的option

方法2：原生JS

选择框处：

<select class="categoryListSelect" name="categorySecond.csid">
    <c:forEach items="${ categoryList}" var="category" >
        <option value="${category.cid }">${category.cname }</option>
    </c:forEach>
</select>

head标签中

<script type="text/javascript">
	window.onload = function () {
		//获得回显的product的cid
		let cid = ${product.cid};
		//获得所有option
		let options = document.querySelectorAll(".categoryListSelect option");
		//遍历，找出value等于cid的那个option，设置属性
		for (let i in options) {
			if (cid == options[i].value) {
				options[i].selected = "selected";
			}
		}
	}
</script>

方法3：jQuery

选择框处：

<select class="categoryListSelect" name="categorySecond.csid">
    <c:forEach items="${ categoryList}" var="category" >
        <option value="${category.cid }">${category.cname }</option>
    </c:forEach>
</select>

head标签中：

<script type="text/javascript">
    $(function() {
        $(".categoryListSelect option[value='${product.cid}']").attr("selected","selected")
    })
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-04-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

select