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

Posted 2023-02-18

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

【英文标题】：Dropdown not populated with data from an array when using jQuery.each() inside a Javascript file

【发布时间】：2021-10-29 09:09:32

【问题描述】：

我正在开发一个简单的单页网站，作为以太坊 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);  
            
          );
        );
      ,

【问题讨论】：

“不填充”是什么意思？你调试过你自己的代码吗？你确定你的 populateAddress() 方法被调用了吗？添加调试日志并找出哪些代码行没有被执行。

谢谢安迪·雷。我只是编辑了标题，希望它使它更清晰一些。 populateAddress() 函数应该获取帐户的地址并将它们附加到下拉列表中，但这不起作用。我得到的只是一个空的下拉元素。希望这更有意义。我不是 JS 专家，所以希望得到一些帮助。谢谢。

请阅读how to ask 并编辑此问题（请勿发表评论）并提供更多详细信息。您还没有进行任何调试，请具体说明代码在哪里不起作用。如果您不熟悉 console.log，请阅读它。

【参考方案1】：

问题是您将字符串传递给 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>

【讨论】：

感谢 Negi Rox，但这对我不起作用。看来 append() 方法也可以根据 Andy Ray 发布的链接获取一个字符串。

要创建一个选项，你应该使用一个对象而不是字符串。