如何访问动态填充值的HTML元素?

时间:2017-12-20 17:14:56

标签: javascript html database

我已经阅读了很多stackoverflow问题而没有运气。我的问题是,我有一个HTML页面,我有

<select id="myid"></select>

并且在那里,有一个Firebase命令可以检索我需要的值的名称,并将其放在<option>中,如下所示:

reference.on("child_added", function (childSnapshot){
  var key = childSnapshot.key;
  var opt = document.createElement('option');
  opt.textContent = key;
  document.getElementById('myid').appendChild(opt);
});

现在,我需要以某种方式访问​​这些值,顺便说一句,这些值正确地出现在HTML和我的网站中,但是:

var val = document.getElementById('myid').value;
console.log(val);

它总是在控制台中返回空白。我不知道如何才能访问它。每当我在HTML中自己在<option>中输入这些值时,一切正常,控制台将返回数据库中的名称。

@edit:据我试图破解它,它似乎与javascript无法访问元素的事实有关,javascript本身尚未加载,但我尝试做window.onload和其他类似的那些,他们没有帮助。

1 个答案:

答案 0 :(得分:0)

您可以使用AngularJS,使用指令$ scope.watch,如果您有任何问题请与我联系,我将编写一个如何使用的简单示例和文档链接!

function MyController($scope) {

  $scope.myVar = 1;

  $scope.$watch('myVar', function() {
      alert('hey, myVar has changed!');
  });

  $scope.buttonClicked = function() {
      $scope.myVar = 2; // This will trigger $watch expression to kick in
  };
}

AngularJS Documentation

我希望对此有所帮助:)