动态单选框

Question

大家好
考虑这个js表单问题好几天了，解决不了，希望了解的帮帮忙啊
我从A函数传递给B函数一个实例layer，里面有好几个值 不确定
怎么把layer[i].name  , i=0到layer.length-1 放到<option></option>中
var op=document.createElement('option'); 用js写。谢谢

Answer 1

做一个循环就OK了<select id=s1>
</select>
<script>
var s = document.getElementById("s1");
s.add(new Option("显示值","实际值"));
alert(s.outerHTML);
</script>

Answer 2

谢谢你 lihui——shine ，这么快就回复我的提问，
有一点不懂 ，显示值，实际值都是什么啊
我是把var s = document.getElementById("s1");
s.add(new Option("显示值","实际值"));
添加到for循环里面么？
for (var i=layer.length-1;i>=0;i--)
{
var s = document.getElementById("s1");
s.add(new Option("显示值","实际值"));
}

Answer 3

    <script type="text/javascript">
    var layer = [{id:1,name:"name1"},{id:2,name:"name2"}];
    window.onload=function(){
    var sel = document.getElementById("sel");
    var opt;
    for(var i=0,len = layer.length;i<len;i++){
     opt = document.createElement("option");
     opt.setAttribute("value",layer[i].id);
     opt.innerHTML = layer[i].name;
     sel.appendChild(opt);
    }
    }
    </script>
 <select id="sel">
    </select>

Answer 4

    <script type="text/javascript">
    var layer = [{id:1,name:"name1"},{id:2,name:"name2"}];
    window.onload=function(){
    var sel = document.getElementById("sel");
    for(var i=0,len = layer.length;i<len;i++){
     sel.options.add(new Option(layer[i].name,layer[i].id));
    }
    }
    </script>
 <select id="sel">
    </select>

Answer 5

select控件与其他控件有点不同，它可以将显示值和实际值分开
顾名思义：
显示值：用于显示的值
实际值：用于存储、判断等比如<select id=s1><option value="1" selected>北京</option>
<option value="2">上海</option></select>
北京和上海就是显示值，1和2就是实际值
而document.getElementById("s1").value这个值获取的是实际值，即这里等于1

Answer 6

十分感谢，麻烦可以再帮改改么,select也改成如下形式的语句，怎么办？
sel = document.createElement("select");

Answer 7

忘了一点，补充一下吧，如果需要第一个option的单选项是null，如何改

Answer 8

    var layer = [{id:1,name:"name1"},{id:2,name:"name2"}];
    window.onload=function(){
       // var sel = document.getElementById("sel");
       var sel = document.createElement("select");
       sel.setAttribute("id","sel");
       //第一个option的单选项是null？?
        sel.options.add(new Option("null（显示的名称）","null（值）"));
        for(var i=0,len = layer.length;i<len;i++){
            sel.options.add(new Option(layer[i].name,layer[i].id));
        }
        document.getElementById("div").appendChild(sel);
    }
<div id="div"></div>

Answer 9

就是一循环 就差不多了 
<select id=s1>
</select>
<script>
var s = document.getElementById("s1");
s.add(new Option("显示值","实际值"));
alert(s.outerHTML);
</script>

Answer 10

document.getElementById("SELECT_id").options[0].value="";
或则直接加一个<option></option>即可

Answer 11

帮我看一段代码 可以吗
真是调不通
function createHeaderHTML(aLayer) {
    var d, t, tb, tr, td, img;
    d = document.createElement( 'div' );
    d.className = 'kaLegendTitle';
    
    t = document.createElement( 'table' );
    t.setAttribute('width','254px');
    t.setAttribute('cellPadding', "0");
    t.setAttribute('cellSpacing', "0");
    t.setAttribute('border', "0");    tb = document.createElement( "tbody" );
    tr = document.createElement( 'tr' );
    td = document.createElement( 'td' );
    td.appendChild(document.createTextNode( 'layers' ));
          cb = document.createElement( 'select' );        
            cb.id='sel';
            //alert(cb.id);
          cb.options.add(new Option("null","null"));
               for (var i=0,len=(aLayer.length);i<len;i++) {
               cb.options.add(new Option(aLayers[i].name,aLayers[i].name));
            }
    td.appendChild( cb );
    tr.appendChild( td );
    tb.appendChild(tr);
    t.appendChild(tb);
    d.appendChild(t);
    return d;
};

Answer 12

 for (var i=0,len=(aLayer.length);i <len;i++) { 
              cb.options.add(new Option(aLayers[i].name,aLayers[i].name)); 
            } 
这个对象写错了,,,没有s的,要跟参数传过来的一样.

Answer 13

<div id="div1" style="margin: 20px; width: 100px; padding: 10px; height: 100px; border: 5px solid #ccc">
    </div>    <script type="text/javascript">
        document.getElementById("div1").appendChild(createHeaderHTML([{ name: "name1" }, { name: "name2"}]));
//aLayer是一个json对象的数组??
        function createHeaderHTML(aLayer) {
            var d, t, tb, tr, td, img;
            d = document.createElement('div');
            d.className = 'kaLegendTitle';            t = document.createElement('table');
            t.setAttribute('width', '254px');
            t.setAttribute('cellPadding', "0");
            t.setAttribute('cellSpacing', "0");
            t.setAttribute('border', "0");            tb = document.createElement("tbody");
            tr = document.createElement('tr');
            td = document.createElement('td');
            td.appendChild(document.createTextNode('layers'));
            cb = document.createElement('select');
            cb.id = 'sel';
            //alert(cb.id); 
            cb.options.add(new Option("null", "null"));
            for (var i = 0, len = (aLayer.length); i < len; i++) {
                cb.options.add(new Option(aLayer[i].name, aLayer[i].name));
            }
            td.appendChild(cb);
            tr.appendChild(td);
            tb.appendChild(tr);
            t.appendChild(tb);
            d.appendChild(t);
            return d;
        }   </script>