【高分求解】利用js实现一个下来列表创建checkbox多选框 举例: 下拉列表里面的项分别是,同学,朋友.当我选择同学的时候,下面就创建出,张三,李四,王五的多选框.. 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><body><select id="sel"> <option>--请选择--</option> <option value="s">同学</option> <option value="f">朋友</option></select><div id="d"></div><script type="text/javascript"> var obj = { s:['张三','李四','王五'], f:['朋友','好朋友'] } document.getElementById('sel').onchange = function(){ document.getElementById('d').innerHTML = ''; var value = this[this.selectedIndex].value; var arr = obj[value]; for(var i = 0; i < arr.length; i++){ var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; document.getElementById('d').appendChild(checkbox); document.getElementById('d').innerHTML += arr[i]; } };</script></body></html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">var data = {};data['schoolmates'] = ['张三', '李四'];data['friends'] = ['王五', '麻六'];window.onload = function() { document.getElementById('s').onchange = function() { var selectedVal = this.value; if (selectedVal !== 'NULL') { chks = document.getElementById('chks'); chks.innerHTML = ''; for(var i = 0; i < data[selectedVal].length; i ++) { var chk = document.createElement('input'); chk.type = 'checkbox'; chk.name = 'somename'; chk.value = data[selectedVal][i]; chk.id = 'chk' + i; chks.appendChild(chk); var label = document.createElement('label'); label.setAttribute('for', 'chk' + i); label.innerHTML = data[selectedVal][i]; chks.appendChild(label); var span = document.createElement('span'); span.innerHTML = ' '; chks.appendChild(span); } } }}</script></head><body><select id="s"> <option value="NULL">请选择</option> <option value="schoolmates">同学</option> <option value="friends">朋友</option></select><form> <div id="chks"></div> <input type="submit" value="提交" /></form></body></html> 外面不是有一个div,然后给这个div定义样式就行了div input{}这样定义就行了嗯 动态生成的代码源码是看不到的~·能取到值var obj = { s:['张三','李四','王五'], f:['朋友','好朋友'] } document.getElementById('sel').onchange = function(){ document.getElementById('d').innerHTML var value = this[this.selectedIndex].value; var arr = obj[value]; for(var i = 0; i < arr.length; i++){ var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = 'cb'+i;//加个id document.getElementById('d').appendChild(checkbox); document.getElementById('d').innerHTML += arr[i]; } };这样加个动态id就行了~·第一个就是cb0以此类推或者document.getElementsByTagName('input')然后循环也行~· 我照着你给的改了 ,然后给它设置了value,但是当我选择不同的下拉列表后,动态生成的checkbox一直是存在的,并且一直累加...多选几次,页面都铺满了checkbox var obj = { s:['张三','李四','王五'], f:['朋友','好朋友'] } document.getElementById('sel').onchange = function(){ document.getElementById('d').innerHTML = ''; var value = this[this.selectedIndex].value; var arr = obj[value]; for(var i = 0; i < arr.length; i++){ var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = 'cb'+i;//加个id document.getElementById('d').appendChild(checkbox); document.getElementById('d').innerHTML += arr[i]; } };把红色的这句加上~· 师兄,现在我该做的都做了。。就是剩最后一个排版的问题了。。我把输出的div设置了宽度。。但是这样输出后,生成的控件不会自己换行,而且占满了宽度后,才换行本来是同一项的字都有一半换到了第二行了,这样看起来很不美观。。有什么方法能够处理一下呢?比如一行只生成4个控件。。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> #d{width:220px;}</style><body><select id="sel"> <option>--请选择--</option> <option value="s">同学</option> <option value="f">朋友</option></select><div id="d"></div><script type="text/javascript"> var obj = { s:['张三','李四','王五','张三','李四','王五'], f:['朋友','好朋友'] } document.getElementById('sel').onchange = function(){ document.getElementById('d').innerHTML = ''; var value = this[this.selectedIndex].value; var arr = obj[value]; for(var i = 0; i < arr.length; i++){ var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; document.getElementById('d').appendChild(checkbox); document.getElementById('d').innerHTML += arr[i]; } };</script></body></html>这个宽度 你根据文字调下~· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><body><select id="sel"> <option>--请选择--</option> <option value="s">同学</option> <option value="f">朋友</option></select><div id="d"></div><script type="text/javascript"> var obj = { s:['张三','李四','王五','张三','李四','王五','张三','李四','王五'], f:['朋友','好朋友'] } document.getElementById('sel').onchange = function(){ document.getElementById('d').innerHTML = ''; var value = this[this.selectedIndex].value; var arr = obj[value]; for(var i = 0; i < arr.length; i++){ var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; document.getElementById('d').appendChild(checkbox); document.getElementById('d').innerHTML += arr[i]; if(i % 4 == 3 && i != 0){ document.getElementById('d').innerHTML += '<br />' } } };</script></body></html>不定义宽度,这样也可以,用js判断~·4个就换行~· 好了。。太谢谢师兄了。。结贴javascript好强啊你的... 获取值相关问题 编程源码一键生成注释方法? 多个div显示问题 我用DIV做的文本滚动 DIV我设了10000px长度,不知道有没有更好的办法 页面图片不显示原因?急!!!! 求抽取smil属性的具体实现 window.opener给前一网页传值时不支持框架吗? 在线等待 ---表格的位置 一个奇怪的window.open()问题?????? 关于打印的问题:http://lucky.myrice.com/print.htm这个东西还是不错的,可是。。。。 比较时间段一与时间段二是否有交集的php函数 求救啊!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<body>
<select id="sel">
<option>--请选择--</option>
<option value="s">同学</option>
<option value="f">朋友</option>
</select>
<div id="d"></div>
<script type="text/javascript">
var obj = {
s:['张三','李四','王五'],
f:['朋友','好朋友']
}
document.getElementById('sel').onchange = function(){
document.getElementById('d').innerHTML = '';
var value = this[this.selectedIndex].value;
var arr = obj[value];
for(var i = 0; i < arr.length; i++){
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
document.getElementById('d').appendChild(checkbox);
document.getElementById('d').innerHTML += arr[i];
}
};
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var data = {};
data['schoolmates'] = ['张三', '李四'];
data['friends'] = ['王五', '麻六'];window.onload = function() {
document.getElementById('s').onchange = function() {
var selectedVal = this.value;
if (selectedVal !== 'NULL') {
chks = document.getElementById('chks');
chks.innerHTML = '';
for(var i = 0; i < data[selectedVal].length; i ++) {
var chk = document.createElement('input');
chk.type = 'checkbox';
chk.name = 'somename';
chk.value = data[selectedVal][i];
chk.id = 'chk' + i;
chks.appendChild(chk);
var label = document.createElement('label');
label.setAttribute('for', 'chk' + i);
label.innerHTML = data[selectedVal][i];
chks.appendChild(label);
var span = document.createElement('span');
span.innerHTML = ' ';
chks.appendChild(span);
}
}
}
}
</script>
</head><body>
<select id="s">
<option value="NULL">请选择</option>
<option value="schoolmates">同学</option>
<option value="friends">朋友</option>
</select>
<form>
<div id="chks"></div>
<input type="submit" value="提交" />
</form>
</body>
</html>
嗯 动态生成的代码源码是看不到的~·能取到值var obj = {
s:['张三','李四','王五'],
f:['朋友','好朋友']
}
document.getElementById('sel').onchange = function(){
document.getElementById('d').innerHTML
var value = this[this.selectedIndex].value;
var arr = obj[value];
for(var i = 0; i < arr.length; i++){
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = 'cb'+i;//加个id
document.getElementById('d').appendChild(checkbox);
document.getElementById('d').innerHTML += arr[i];
}
};这样加个动态id就行了~·
第一个就是cb0以此类推或者document.getElementsByTagName('input')然后循环也行~·
我照着你给的改了 ,然后给它设置了value,但是当我选择不同的下拉列表后,动态生成的checkbox一直是存在的,并且一直累加...多选几次,页面都铺满了checkbox
s:['张三','李四','王五'],
f:['朋友','好朋友']
}
document.getElementById('sel').onchange = function(){
document.getElementById('d').innerHTML = '';
var value = this[this.selectedIndex].value;
var arr = obj[value];
for(var i = 0; i < arr.length; i++){
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = 'cb'+i;//加个id
document.getElementById('d').appendChild(checkbox);
document.getElementById('d').innerHTML += arr[i];
}
};
把红色的这句加上~·
师兄,现在我该做的都做了。。就是剩最后一个排版的问题了。。
我把输出的div设置了宽度。。但是这样输出后,生成的控件不会自己换行,而且占满了宽度后,才换行
本来是同一项的字都有一半换到了第二行了,这样看起来很不美观。。
有什么方法能够处理一下呢?
比如一行只生成4个控件。。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#d{width:220px;}
</style>
<body>
<select id="sel">
<option>--请选择--</option>
<option value="s">同学</option>
<option value="f">朋友</option>
</select>
<div id="d"></div>
<script type="text/javascript">
var obj = {
s:['张三','李四','王五','张三','李四','王五'],
f:['朋友','好朋友']
}
document.getElementById('sel').onchange = function(){
document.getElementById('d').innerHTML = '';
var value = this[this.selectedIndex].value;
var arr = obj[value];
for(var i = 0; i < arr.length; i++){
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
document.getElementById('d').appendChild(checkbox);
document.getElementById('d').innerHTML += arr[i];
}
};
</script>
</body>
</html>这个宽度 你根据文字调下~·
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<body>
<select id="sel">
<option>--请选择--</option>
<option value="s">同学</option>
<option value="f">朋友</option>
</select>
<div id="d"></div>
<script type="text/javascript">
var obj = {
s:['张三','李四','王五','张三','李四','王五','张三','李四','王五'],
f:['朋友','好朋友']
}
document.getElementById('sel').onchange = function(){
document.getElementById('d').innerHTML = '';
var value = this[this.selectedIndex].value;
var arr = obj[value];
for(var i = 0; i < arr.length; i++){
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
document.getElementById('d').appendChild(checkbox);
document.getElementById('d').innerHTML += arr[i];
if(i % 4 == 3 && i != 0){
document.getElementById('d').innerHTML += '<br />'
}
}
};
</script>
</body>
</html>不定义宽度,这样也可以,用js判断~·4个就换行~·
好了。。太谢谢师兄了。。结贴javascript好强啊你的...