如何用JS实现左边一个下拉列表选择一个值点击右边的添加按钮将选择的内容添加到一个div中

选择下拉别表中的一个内容，点击添加按钮，将刚才选择的值放入下面的div里面，可以实现循环添加，也就是说，添加一个值后，再选择，再添加，那么以前选择的那些值都仍然可以出现在下面的div中，高手支个招，最好是用JS，不用和服务器交互

举报该文章

相关建议推荐于2017-12-15

用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>

追问

这个可以实现最好要能传值的那种

追答

传值能也无非在添加的有个ajax交互，把url换成请求的地址就好了

$('button').click(function(){
            var dataSource = $('#dataSource :selected');
            if(dataSource.length === 0){
                return alert('请先选择分类');
            }
            //把此处的url换成要提交的地址
            $.post(url, {id: dataSource.val()}, function(data){
                  if(data){
                       var text = dataSource.text();
                        $('#choosed').append('<div>'+text+'</div>');
                  }
            });

        });

追问

就是类似这种的大神谢谢啊帮帮吧

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/fm7877472fv24p4v72.html

其他看法

第1个回答推荐于2016-09-29

有集成的jq插件直接用就行

不用自己做

例：ztree，dtree

相似回答

大家正在搜

如何用JS实现 左边一个下拉列表 选择一个值 点击右边的添加按钮 将选择的内容添加到一个div中

如何用JS实现左边一个下拉列表选择一个值点击右边的添加按钮将选择的内容添加到一个div中