如何设置动态创建的元素值下拉？

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);
     });
  }
};