Javascript通过getElementbyId访问动态创建的元素

我把玩Javascript作为一种爱好，在访问通过另一个函数动态创建的元素时遇到了麻烦

本质上，我有一个链接，它可以动态地创建几个下拉选择，并带有几个选项。然后我有一个第二个链接，我会尝试将一些选择的选项打印到控制台上

HTML:

Javascript:

function maker() {
    box.appendChild(document.createElement("br"));
    for (i = 0; i < 2; i++) {
      box.appendChild(document.createTextNode("test " + (i + 1) + " "));
      for (k = 0; k < 2; k++) {
        var dropdown = document.createElement("select");
        box.appendChild(dropdown);
        for (j = 0; j < nice.length; j++) {
          var option = document.createElement("option");
          option.value = nice[j];
          option.text = nice[j];
          option.id = 'option' + i + k;
          console.log(option.id)
          dropdown.appendChild(option);
        }
      }
      box.appendChild(document.createElement("br"));
    }
}

function getter() {
  var test = document.getElementById("option01");
  console.log(test.options[test.selectedIndex].value);
}

函数生成器（）{
box.appendChild（document.createElement（“br”））；
对于（i=0；i<2；i++）{
appendChild（document.createTextNode（“test”+（i+1）+”）；
对于（k=0；k<2；k++）{
var dropdown=document.createElement（“选择”）；
box.appendChild（下拉列表）；
对于（j=0；j

在创建选项id时，我已经打印以控制它们（打印出来似乎没有问题），并通过appendChild将它们添加到DOM中。但是，对于第二个函数，尽管显式引用了id，但我无法检索选项的选定值

我猜这与脚本的加载顺序有关。有人能帮我了解发生了什么事吗

附件是我的JSFIDLE文件，

---

干杯，

问题在于，

嵌套在

的内部，并且是*

*s具有

selectedIndex

属性。因此，

test.options[test.selectedIndex].value在
test
是
元素时不起作用。尝试使用
getElementById
获取其中一个
s，然后只需访问其
.value
（这比检查
selectedIndex
要省事）：


var nice=[2,3,5]；
函数生成器（）{
box.appendChild（document.createElement（“br”））；
对于（i=0；i<2；i++）{
appendChild（document.createTextNode（“test”+（i+1）+”）；
对于（k=0；k<2；k++）{
var dropdown=document.createElement（“选择”）；
dropdown.id='选择'+i；
box.appendChild（下拉列表）；
对于（j=0；j



问题在于
嵌套在
的内部，而*
*s具有
selectedIndex
属性。因此，
test.options[test.selectedIndex].value在
test
是
元素时不起作用。尝试使用
getElementById
获取其中一个
s，然后只需访问其
.value
（这比检查
selectedIndex
要省事）：


var nice=[2,3,5]；
函数生成器（）{
box.appendChild（document.createElement（“br”））；
对于（i=0；i<2；i++）{
appendChild（document.createTextNode（“test”+（i+1）+”）；
对于（k=0；k<2；k++）{
var dropdown=document.createElement（“选择”）；
dropdown.id='选择'+i；
box.appendChild（下拉列表）；
对于（j=0；j



我们需要区分选项元素和选择元素。select元素是您大部分时间都希望与之交互的元素，而option元素只是select元素的可能条目的集合

现在，您的代码将生成以下类型的元素：

<select>
    <option value="2" id="option00">2</option>
    <option value="3" id="option00">3</option>
    <option value="5" id="option00">5</option>
</select>


2.
3.
5.

正如您所看到的，所有选项都接收相同的ID—这在HTML文档中通常是禁止的。您可能会考虑将ID指示器移动到SELECT元素，这也使您可以访问所选选项的值。
以下是修订后的JS代码以及修订前的注释：

var nice = [2, 3, 5];

  function maker() {
    box.appendChild(document.createElement("br"));
    for (i = 0; i < 2; i++) {
      box.appendChild(document.createTextNode("test " + (i + 1) + " "));
      for (k = 0; k < 2; k++) {
        var dropdown = document.createElement("select");
        # Giving the select item an ID instead of each option
        dropdown.id = 'select' + i + k;
        box.appendChild(dropdown);
        for (j = 0; j < nice.length; j++) {
          var option = document.createElement("option");
          option.value = nice[j];
          option.text = nice[j];
          option.id = 'option'
          console.log(option.id)
          dropdown.appendChild(option);
        }
      }
      box.appendChild(document.createElement("br"));
    }
  }

  function getter() {
    # Getting the select element instead of the option 
    var selectElement = document.getElementById("select00");

    # The value attribute of the select element is the value of the selected option
    console.log(selectElement.value);
  }

var nice=[2,3,5]；
函数生成器（）{
box.appendChild（document.createElement（“br”））；
对于（i=0；i<2；i++）{
appendChild（document.createTextNode（“test”+（i+1）+”）；
对于（k=0；k<2；k++）{
var dropdown=document.createElement（“选择”）；
#为选择项指定一个ID而不是每个选项
dropdown.id='select'+i+k；
box.appendChild（下拉列表）；
对于（j=0；jvar nice = [2, 3, 5];

  function maker() {
    box.appendChild(document.createElement("br"));
    for (i = 0; i < 2; i++) {
      box.appendChild(document.createTextNode("test " + (i + 1) + " "));
      for (k = 0; k < 2; k++) {
        var dropdown = document.createElement("select");
        # Giving the select item an ID instead of each option
        dropdown.id = 'select' + i + k;
        box.appendChild(dropdown);
        for (j = 0; j < nice.length; j++) {
          var option = document.createElement("option");
          option.value = nice[j];
          option.text = nice[j];
          option.id = 'option'
          console.log(option.id)
          dropdown.appendChild(option);
        }
      }
      box.appendChild(document.createElement("br"));
    }
  }

  function getter() {
    # Getting the select element instead of the option 
    var selectElement = document.getElementById("select00");

    # The value attribute of the select element is the value of the selected option
    console.log(selectElement.value);
  }