动态下拉列表无法正常工作

时间:2013-10-08 09:53:32

标签: javascript select dynamic

我已经在javascript中动态创建了3个下拉列表但不知道如何获取这3个下拉列表添加名称属性的值到下拉列表不起作用。这是整个代码..

function addrow() {
    rowcount++;
    document.getElementById("myTableData").style.display="block";
    var el = document.createElement('input');
        el.type = 'text';
        el.name = 'kname';
        var del = document.createElement('input');
        del.type = 'button';
        del.name = 'delll';
        del.value = 'del';
        del.onclick = function(){
            tr.parentElement.removeChild(tr); rowcount--;
            if(rowcount == 0){
            document.getElementById("myTableData").style.display = "none"; 
        }
        };
        var el_r = document.createElement('input');
        el_r.type = 'radio';
        el_r.name = 'gender'+rowcount+'[]';
        el_r.value ='FEMALE';
      //el_r.id = "rad1";  
      //el_r.defaultChecked = true;   
        var el_r2 = document.createElement('input');
        el_r2.type = 'radio';
        el_r2.name = 'gender'+rowcount+'[]';
        el_r2.value ='MALE';
      //el_r2.id = "rad2";  
        var obj1 = document.createTextNode("Female");  
        var obj2 = document.createTextNode("Male");  
        var objLabel = document.createElement("label");  
        objLabel.htmlFor = el_r.id;  
        objLabel.appendChild(el_r);  
        objLabel.appendChild(obj1);
        var objLabel2 = document.createElement("label");  
        objLabel2.htmlFor = el_r2.id;  
        objLabel2.appendChild(el_r2);  
        objLabel2.appendChild(obj2);  

      //**dropdown**    
        var el_s = document.createElement('select');
        el_s.onchange =  function(){ 
            var r = el_s.options[el_s.selectedIndex].value;
        }
        for(var i=0;i<32;i++){
            var j = i;
            j = document.createElement('option');
            j.text=i;
            j.name="day";
            j.value=j;
            el_s.appendChild(j);
        }
        var month = new Array("January","Februray","March","April","May","June","July","August","September","October","November","December");
        var el_sm = document.createElement('select');
        for(var i=0;i<month.length;i++){
            var j = i;
            j = document.createElement('option');
            j.text=month[i];
            j.name="month";
            j.value=month[i];
            el_sm.appendChild(j);
        }
        var el_sy = document.createElement('select');
        for(var i=2013;i>1950;i--){
            var j = i;
            j = document.createElement('option');
            j.text=i;
            j.name="year";
            j.value=j;
            el_sy.appendChild(j);
        }
        var table = document.getElementById("myTableData");
        var tableBody = document.createElement('TBODY');
        table.appendChild(tableBody);
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        var td = document.createElement('TD');
        td.width='175';
        td.appendChild(el);
        tr.appendChild(td);
        var td = document.createElement('TD');
        td.width='245';
        td.appendChild(objLabel);
        td.appendChild(objLabel2);
        tr.appendChild(td);
        var td = document.createElement('TD');
        td.width='245';
        td.appendChild(el_s);
        td.appendChild(el_sm);
        td.appendChild(el_sy);
        tr.appendChild(td);
        var td = document.createElement('TD');
        td.width='20';
        td.appendChild(del);
        tr.appendChild(td);
        myTableData.appendChild(table);
}

以上代码位于表单标记中。 此代码工作正常,但预期未提供所选日期值的下拉部分未显示。我在url中检查这个

1 个答案:

答案 0 :(得分:1)

您必须将selected属性设置为您要默认选择的true

optionObject.selected=true

修改

我使用您的代码向您展示它是如何工作的(在此示例中,选定的值将是2011,但您可以更改条件以选择您想要的值):

var el_sy = document.createElement('select');
for(var i=2013;i>1950;i--) {
    var j = i;
    j = document.createElement('option');
    j.text=i;

    j.selected = false;
    if (2011 == i) {
       // Select 2011 option
       j.selected = true;
    }

    // j.value=j; // You can't do this, because var j now contain Option object
    j.value = i;
    el_sy.appendChild(j);
}

注意:我也纠正了错误:您无法执行j.value = j;因为j包含Option对象。请使用i来将年份设置为值。