动态下拉菜单无法正常工作

Question

我已经在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检查这个

Answer 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包含Option对象，所以不能执行j.value = j;。使用i来代替年份。