如何設置動態創建的下拉列表的元素值？

Question

我使用了字符串數組來填充下拉列表。如何將每個下拉選項的值設置爲與文本內容相同？

el.value = opt;似乎不起作用。

var validCoursesKeys = ['opt 1','opt 2','opt 3','opt 4'] 
 
var validKeys = document.getElementsByClassName("validKeys"); 
 

 
setFields("courses"); 
 

 
function setFields(browser) { 
 
    //document.getElementById("result").value = browser; 
 

 
    var menuCounter = 1; 
 

 
    if (browser == "courses") { 
 
     for (var i = 0; i < validCoursesKeys.length; i++) { 
 
      var opt = validCoursesKeys[i]; 
 
      var el = document.createElement("option"); 
 

 
      el.textContent = opt; 
 
      el.value = opt; 
 

 
      for (var j = 0; j < validKeys.length; j++) { 
 
       var elementClone = el.cloneNode(true); 
 
       elementClone.id = menuCounter; 
 
       menuCounter++; 
 
       validKeys[j].appendChild(elementClone); 
 
      } 
 
     } 
 
    } else if (browser == "rooms") { 
 
     var menuCounter = 1; 
 
     for (var i = 0; i < validRoomsKeys.length; i++) { 
 
      var opt = validRoomsKeys[i]; 
 
      var el = document.createElement("option"); 
 

 
      el.textContent = opt; 
 
      el.value = opt; 
 

 

 
      for (var j = 0; j < validKeys.length; j++) { 
 
       var elementClone = el.cloneNode(true); 
 
       elementClone.id = menuCounter; 
 
       menuCounter++; 
 
       validKeys[j].appendChild(elementClone); 
 

 
      } 
 
     } 
 
    } 
 
};

<select class="validKeys"></select> 
 
<select class="validKeys"></select> 
 
<select class="validKeys"></select>

Answer 1

你可以做到這一點使用jQuery。使用jquery查看下面更新的代碼

var validKeys = document.getElementsByClassName("validKeys"); 
    function setFields(browser) { 
    //document.getElementById("result").value = browser; 

    var menuCounter = 1; 

    if (browser == "courses") { 
    $.each(validCoursesKeys , function(index, keys) { 
     var content='<option value="' + keys + '">' + keys + '</option>'; 
     validKeys.append(content); 
    }); 
    } else if (browser == "rooms") { 
    var menuCounter = 1; 
    $.each(validRoomsKeys , function(index, keys) { 
     var content='<option value="' + keys + '">' + keys + '</option>'; 
     validKeys.append(content); 
    }); 
    } 
};