时间戳

首页 > 解决方案 > 在 Javascript 文件中使用 jQuery.each() 时，下拉列表中未填充数组中的数据

javascript - 在 Javascript 文件中使用 jQuery.each() 时，下拉列表中未填充数组中的数据

问题描述

作为以太坊 dApp 开发课程的一部分，我正在开发一个简单的单页网站。该网页应该与 Metamask 交互并从使用 Ganache 创建的本地测试网络中提取以太坊地址，然后使用地址填充下拉字段。但是，这是行不通的。

我已将 Metamask 设置为已连接到网页。该页面本身是一个 HTML 文件，它引用了一个名为“app.js”的单独 JavaScript 文件（本地存储在 /js 文件夹中）以及 Bootstrap CSS 文件。JavaScript 文件包含一个名为 populateAddress() 的函数，它应该获取帐户的地址并将它们附加到下拉列表中。这是行不通的。

HTML文件中的下拉部分如下

<div class="row" id="address_div">
  <div style="margin-left: 15px;margin-top: 10px;">
    <span> Address : </span>
    <select id="enter_address" value="">
    </select>
  </div>
</div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 <script src="js/web3.min.js"></script>
 <script src="js/truffle-contract.js"></script>
 <script src="js/app.js"></script>

app.js 中的填充函数如下：

App = {
.
.
.
.    
    populateAddress : function(){
        new Web3(new Web3.providers.HttpProvider(App.url)).eth.getAccounts((err, accounts) => {
          jQuery.each(accounts,function(i){
            if(web3.eth.coinbase != accounts[i]){
              var optionElement = '<option value="'+accounts[i]+'">'+accounts[i]+'</option>';
              jQuery('#enter_address').append(optionElement);  
            }
          });
        });
      },
}

标签： javascripthtmljqueryweb3js

解决方案

问题是您将字符串传递给jQuery('#enter_address').append(optionElement); 方法，而它需要jquery 元素对象。

replace your line 

 var optionElement = '<option value="'+accounts[i]+'">'+accounts[i]+'</option>';

with this

 var optionElement = jQuery("<option/>",{value:accounts[i],text:accounts[i]});

下面是一个示例下拉列表。

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var selctBox = $('#mySelect');
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  selctBox.append($option);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

推荐阅读