如何用js里的数据在页面里生成select下拉列表？

demo here.<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
//    var arr =xmlHttp.responseText;
//    var myobj=eval(arr);
    var myobj = [{ ClassId : 1, ClassStr : 'jikey'}, { ClassId : 2, ClassStr : 'tony'}, { ClassId : 3, ClassStr : 'make'}];    var select = document.createElement('select');
    var option = null;
    for(var i=0;i<myobj.length;i++){
//        alert(myobj[i].ClassId);
//        alert(myobj[i].ClassStr);
        option=createSelect(myobj[i].ClassId, myobj[i].ClassStr);
        select.appendChild(option);
    }
    document.body.appendChild(select);    function createSelect(v, txt){
        var option = document.createElement('option');
        option.value = v;
        option.text = txt;
        return option;
    }
</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">
function createOptions(parent,ops){
var arr=[];
for(var i=0,len=ops.length;i<len;i++){
var o=new Option(ops[i].text,ops[i].value);
parent.appendChild(o);
}
}
window.onload=function(){
createOptions(document.getElementById('test'),[{
'value':1,
'text':'a'
},{
'value':2,
'text':'b'
},{
'value':3,
'text':'a'
}])
}
</script>
</head><body>
<select id="test">
<option>1</option>
</select>
</body>
</html>

<body>
<select id="test">
    <option>1</option>
</select>
<script>
d = [
  { 'value':1, 'text':'a' },
  { 'value':2, 'text':'b' },
  { 'value':3, 'text':'a' }
];
for(i=0; i<d.length; i++) {
  document.getElementById('test').options[i] = new Option(d[i].text,d[i].value);
}
</script>

for(var i=0;i<myobj.length;i++){
document.getElementById('test').options.add( new Option(myobj[i].ClassStr,myobj[i].ClassId)) ;}

    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        var arr = xmlHttp.responseText;        var myobj = eval(arr), sel = document.getElementById('你的select的id');
        sel.options.length = 0//清空原来的
        for (var i = 0; i < myobj.length; i++) {
            sel.options.add(new Option(myobj[i].ClassStr, myobj[i].ClassId))
        }
    }

那如果做多级联动的话因为这个select 是用js创建的怎么给他加 onchange这种事件呢
或者怎么在js里面知道option改变value了我再创建第二个select呢

如果这个select原来没有是通过document.createElement('select')创建的做多级联动的话因为这个select 是用js创建的怎么给他加 onchange这种事件呢
或者怎么在js里面知道option改变value了我再创建第二个select呢

如果这个select原来没有  是通过document.createElement('select')创建的做多级联动的话因为这个select 是用js创建的  怎么给他加 onchange这种事件呢
或者怎么在js里面知道option改变value了  我再创建第二个select呢
   if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        var arr = xmlHttp.responseText;        var myobj = eval(arr), sel = document.createElement('select');/////////
        sel.options.length = 0//清空原来的
        for (var i = 0; i < myobj.length; i++) {
            sel.options.add(new Option(myobj[i].ClassStr, myobj[i].ClassId))
        }
////////////
sel.onchange=function(){
alert(this.value)
//你的处理代码
}
document.body.appendChild(sel);///////////
    }

那如果做多级联动的话因为这个select 是用js创建的  怎么给他加 onchange这种事件呢
或者怎么在js里面知道option改变value了  我再创建第二个select呢demo here<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    var myobj1 = [{ ClassId : 0, ClassStr : '--请选择--'}, { ClassId : 11, ClassStr : 'jikey'}, { ClassId : 21, ClassStr : 'tony'}, { ClassId : 31, ClassStr : 'make'}];
    var myobj2 = [{ ClassId : 0, ClassStr : '--请选择--'}, { ClassId : 12, ClassStr : 'jikey2'}, { ClassId : 22, ClassStr : 'tony2'}, { ClassId : 32, ClassStr : 'make2'}];
    var myobj3 = [{ ClassId : 0, ClassStr : '--请选择--'}, { ClassId : 13, ClassStr : 'jikey3'}, { ClassId : 23, ClassStr : 'tony3'}, { ClassId : 33, ClassStr : 'make3'}];
    var select1 = create(myobj1);
    var select2 = create(myobj2);
    var select3 = create(myobj3);    append(select1);    select1.onchange = function(){
        if(this.value == 11){
            append(select2);
        }
    }    select2.onchange = function(){
        if(this.value == 12){
            append(select3);
        }
    }    function create(myobj){
        var select = document.createElement('select');
        select.options.length = 0;
        for(var i=0;i<myobj.length;i++){
            select.options.add(new Option(myobj[i].ClassStr, myobj[i].ClassId))
        }
        return select;
    }    function append(obj){
        document.body.appendChild(obj);
    }
</script>
</body>
</html>

如果这个select原来没有  是通过document.createElement('select')创建的做多级联动的话因为这个select 是用js创建的  怎么给他加 onchange这种事件呢
或者怎么在js里面知道option改变value了  我再创建第二个select呢
   if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        var arr = xmlHttp.responseText;        var myobj = eval(arr), sel = document.createElement('select');/////////
        sel.options.length = 0//清空原来的
        for (var i = 0; i < myobj.length; i++) {
            sel.options.add(new Option(myobj[i].ClassStr, myobj[i].ClassId))
        }
////////////
sel.onchange=function(){
alert(this.value)
//你的处理代码
}
document.body.appendChild(sel);///////////
    }
这样第二次change的时候第二个创建的select的option没变   因为这个sel.onchange是监听第一个select的xmlHttp.onreadystatechange的吧
在改变第二个select的option的时候 xmlHttp.onreadystatechange这个不起作用？

调试易

如何用js里的数据在页面里生成select下拉列表？

解决方案 »