js/jquery + 字符串拼接技术：点击下拉列表选项，选项出现在下方span，点击选项，消失

本文链接：https://blog.youkuaiyun.com/lsx19981201/article/details/86752441

本文介绍如何使用jQuery实现下拉菜单的选择功能，并在选择后显示并可删除所选选项。通过添加和删除span元素，实现了动态更新界面的效果。

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

在做admin后台模板的时候，根据要求，要实现点击下拉列表选项，下方出现该选项的开发人员，点击下方开发人员（样式中人员后可以添加删除的图标），下方开发人员选项消失。经过一些波折，终于实现效果。

点击下方选项消失。

纯添加的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="../libs/jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
	<select name="aaa" id="aaa" style="width: 50px;height: 50px;" onchange="gradeChange()">
		<option id="q">qqq</option>
		<option id="w">www</option>
		<option id="e">eee</option>
	</select>
	<div style="width: 60px;height: 40px" id="lzj"></div>

</body>
<script type="text/javascript">
	function gradeChange(){
		var m = $("#aaa").val();
		$("#lzj").append('<p style ="color : red" ">'+ m + "</p>");
	}
</script>
</html>

添加和删除的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="../libs/jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
	<select name="aaa" id="aaa" style="width: 50px;height: 50px;" onchange="gradeChange()">
		<option id="q">qqq</option>
		<option id="w">www</option>
		<option id="e">eee</option>
	</select>
	<div style="width: 60px;height: 40px" id="lzj"></div>

</body>

<script>
    function gradeChange() {
        var m = $("#aaa").val();
        //$("#lzj").append('<span onclick="dian(' + "'" + m +"'" + ')"'+  ' id=' + m  +  ' style="color: red" >' +  m + '</span>&nbsp;&nbsp;');
    $("#lzj").append('<span onclick="dian(' + "'" + m + "'" + ')" id=' + "'" + m + "'" + 'style="color: red">' + m + '</span>');

    }

function dian(e) {
        var q = "#" + e;
        $(q).remove();


}

</script>
</html>

append后代码的原型为：

<span onclick="dian('m')" id=" 'm' " style="color: red">m</span>

m指代的是一个常量，不是字符串，故转义后如上。

嗯，感觉转义的常量和字符串我还有些没搞清楚。作为笔记谨记。

js/jquery + 字符串拼接技术 ：点击下拉列表选项，选项出现在下方span，点击选项，消失

js/jquery + 字符串拼接技术：点击下拉列表选项，选项出现在下方span，点击选项，消失