bootstrap动态拼接下拉框

最新推荐文章于 2023-04-25 17:22:48 发布

成市风彩

最新推荐文章于 2023-04-25 17:22:48 发布

阅读量492

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/world_the_begin/article/details/106692339

版权

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在Web应用中实现动态下拉菜单的方法，通过Ajax调用后端接口获取数据并实时更新二级分类下拉框，确保用户界面的响应性和数据的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="control-group">
			<label class="control-label">二级分类：</label>
			<div class="controls">
				<form:select path="subCategoryId" id="subCategoryId" class="input-medium">
                    <%-- <form:options items="${fns:getNavigationList(deskId)}" itemLabel="name" itemValue="id" htmlEscape="false"/> --%>
                </form:select>
			    <span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
//动态调用赋值下拉框
function categoryChange(){
	    	var id = $("#categoryId").val();
            $("#subCategoryId").html('');
            $("#subCategoryId").val('');
            $.ajax({
                url : '${ctx}/categoryinfo/categoryInfo/getCategorySon',
                type : "post",
                data : {
                    id : id
                },
                cache : false,
                error : function() {
                },
                success : function(data) {
                    
                    var optionstr = "";
                    var va="";
                    var list = data.list;
                    if (list && list.length != 0) {
                        $.each(list, function(index, item) {
                            optionstr+="<option value=\""+item.id;
                            optionstr+="\"";
                            if(index==0){
                                optionstr += " selected=\"selected\" "; //默认选中
                                va=item.name;
                            }
                            optionstr+=" >"+item.name+ "</option>";
                         });
                        $("#subCategoryId").append(optionstr);
                    }
                    $("#s2id_subCategoryId span.select2-chosen").eq(0).text(va);
                }
            });
        }