修改商品信息时给特定option添加相应selected属性的方法
应用场景
商城后台，点击某个商品的“编辑”按钮之后，回显商品现有的信息，其中包含select的下拉框，需要在这个框显示出正确的商品信息。
比如点击这个编辑按钮之后
这个商品分类要显示正确的信息
方法1：EL表达式
代码语言：javascript代码运行次数：0运行复制<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">${categoryame }</option>
</c:if>
<c:if test="${category.cid != product.cid }">
<option value="${category.cid }">${categoryame }</option>
</c:if>
</c:forEach>
</select>就是product的id和category的id一致时，输出带selected的option
方法2：原生JS
选择框处：
代码语言：javascript代码运行次数：0运行复制<select class="categoryListSelect" name="categorySecond.csid">
<c:forEach items="${ categoryList}" var="category" >
<option value="${category.cid }">${categoryame }</option>
</c:forEach>
</select>head标签中
代码语言：javascript代码运行次数：0运行复制<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
选择框处：
代码语言：javascript代码运行次数：0运行复制<select class="categoryListSelect" name="categorySecond.csid">
<c:forEach items="${ categoryList}" var="category" >
<option value="${category.cid }">${categoryame }</option>
</c:forEach>
</select>head标签中：
代码语言：javascript代码运行次数：0运行复制<script type="text/javascript">
$(function() {
$(".categoryListSelect option[value='${product.cid}']").attr("selected","selected")
})
</script>
发布评论