用js和jQuery写了个demo，你自己完善下细节吧
原生js实现
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>添加取值</title>
</head>
<body>
<select id="dataSource" multiple>
<option value="1">jQuery入门</option>
<option value="2">jQuery精通</option>
<option value="3">angularjs入门</option>
<option value="4">angularjs精通</option>
</select>
<button id="add">添加</button>
<div id="choosed"></div>
<script type="text/javascript">
var add = document.getElementById('add'),
sel = document.getElementById('dataSource'),
choseContainer = document.getElementById('choosed')
add.onclick = function(){
if(sel.selectedIndex < 0){
return alert('请先选择分类')
}
var text = sel.options[sel.selectedIndex].innerHTML,
newNode = document.createElement("div")
newNode.innerHTML = text
choseContainer.appendChild(newNode)
}
</script>
</body>
</html>
jQuery 实现：你需要将引入的jQuery src换成你本地的src
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>添加取值</title>
</head>
<body>
<select id="dataSource" multiple>
<option value="1">jQuery入门</option>
<option value="2">jQuery精通</option>
<option value="3">angularjs入门</option>
<option value="4">angularjs精通</option>
</select>
<button id="add">添加</button>
<div id="choosed"></div>
<script type="text/javascript" src="http:本地路径/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('button').click(function(){
var dataSource = $('#dataSource :selected')
if(dataSource.length === 0){
return alert('请先选择分类')
}
var text = dataSource.text()
$('#choosed').append('<div>'+text+'</div>')
})
</script>
</body>
</html>
<script>$(function() {
$("#mainUl").children("li").click(function() {
var clone = $(this).clone()
clone.append("<span style='color:redfont-weight: boldcursor:pointer'> X</span>")
.find("span").click(function () {
$(this).parent().remove("li")
})
$("#showUl").append(clone)
})
})
</script>
<body>
<div style="float: left">
<ul id="mainUl">
<li>标题1</li>
<li >标题2</li>
<li >标题3</li>
<li >标题4</li>
<li >标题5</li>
</ul>
</div>
<div style="float: left">
<ul id="showUl">
</ul>
</div>
</body>
随手写了个，自己试试吧，注意引入jQuery哦
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）