javaScript：后台管理功能_js后台管理有几种力度-优快云博客

本文链接：https://blog.youkuaiyun.com/happydream_C/article/details/52442405

本文介绍了使用JavaScript在后台管理系统中实现添加标签的功能。用户可以输入数字来增加相应数量的标签，点击标签旁边的放大镜图标进行搜索选择。保存修改时，JavaScript会同步保存内容与标签的关联关系。

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

HTML:

<%@ page contentType="text/html; charset=UTF-8" session="false"%>
<%@ include file="/WEB-INF/jspf/import.jspf"%>
<div class="pageContent">
	<form method="post"
		action="${ROOT}/admin/appcontent/${method}.do?appContentId=${param.appContentId}&redirect=${param.redirect}"
		class="pageForm required-validate"
		οnsubmit="return checkFormValid(this, navTabAjaxDone);">
		<div class="pageFormContent" layoutH="56">
			<fieldset>
				<legend>内容基础信息 </legend>
				<c:if test="${method == 'update'}">
					<div class="unit">
						<label style="width: 120px;">创建者: </label> <input
							class="textInput" readonly="true" type="text" name="createBy"
							maxlength="50" value="${entity.createBy}" size="35" />
					</div>
					<div class="unit">
						<label style="width: 120px;">创建时间: </label> <input
							class="textInput" readonly="true" type="text" name="createDate"
							value="${geli:display(entity,'createDate')}" size="35" />
					</div>
				</c:if>
				<div class="unit">
					<label style="width: 120px;">来源: </label> <input type="hidden"
						value="${entity.refer}" name="oldRefer" /> <select class="combox"
						name="refer" id="refer" οnchange="onChange()">
						<option value="1" ${entity.refer == 1 ? 'selected' : ''}>文章</option>
	                    <option value="2" ${entity.refer == 2 ? 'selected' : ''}>专题</option>
	                    <option value="3" ${entity.refer == 3 ? 'selected' : ''}>视频</option>
	                    <option value="4" ${entity.refer == 4 ? 'selected' : ''}>食谱</option>
	                    <option value="5" ${entity.refer == 5 ? 'selected' : ''}>图说</option>
	                    <option value="6" ${entity.refer == 6 ? 'selected' : ''}>百科</option>
	                    <option value="7" ${entity.refer == 7 ? 'selected' : ''}>帖子</option>
	                    <option value="8" ${entity.refer == 8 ? 'selected' : ''}>专家视点</option>    
	                    <option value="9" ${entity.refer == 9 ? 'selected' : ''}>健康</option>
						<option value="15" ${entity.refer == 15 ? 'selected' : ''}>特殊的推送类型</option>
					</select>
				</div>
				<div class="unit">
					<label style="width: 120px;">内容ID: </label> <input
						class="textInput required digits" type="text" name="contentId"
						id="contentId" maxlength="50" value="${entity.contentId}"
						size="35" /> <input type="hidden" value="${entity.contentId}"
						name="oldContentId" />
				</div>
				<div class="unit">
					<label style="width: 120px;">内容URL: </label> <input
						class="textInput url required" type="text" name="url"
						maxlength="250" value="${entity.url}" size="93" /> <input
						type="hidden" value="${entity.url}" name="oldUrl" />
				</div>
				<div class="unit">
					<label style="width: 120px;">APP图文标题: </label> <input
						class="textInput required" type="text" name="title"
						id="contentTitle" maxlength="8" value="${entity.title}" size="93"
						οnkeydοwn="countChineseL('contentTitle','counterLT');"
						οnkeyup="countChineseL('contentTitle','counterLT');" /> <span
						id="counterLT">0</span>/8个中文字<br>
				</div>
				<div class="unit">
					<label style="width: 120px;">APP纯文本标题: </label> <input
						class="textInput required" type="text" name="textTitle"
						id="contentTextTitle" maxlength="14" value="${entity.textTitle}"
						size="93"
						οnkeydοwn="countChineseL('con