获取使用 JavaScript 动态填充的下拉列表中的选定值答案

【问题标题】：Get selected value in dropdown list that is populated dynamicaly using JavaScript获取使用 JavaScript 动态填充的下拉列表中的选定值
【发布时间】：2019-09-13 20:35:30
【问题描述】：

在这里我试图在选择货币时显示国家标志，但当我使用来自 API 的数据时我的代码不起作用

function createDoll(userChoice) {
var output = document.getElementById("display_here");
output.innerHTML = "";

var links = [
    "https://simplytest.co.za/fxpaymaster/wp-content/uploads/2019/09/usd-flat.jpg",
    "https://simplytest.co.za/fxpaymaster/wp-content/uploads/2019/09/sa-flag.jpg"
];
var img1;
var e=document.getElementById("currency-from");
var strUservalue = e.options[e.selectedIndex].value;
var strUsertext = e.options[e.selectedIndex].text;
if(strUservalue=='USD')
{
     img1 = '<img src="' + links[userChoice] + '">';
}

var choices = ["USD", "ZAR"];
var sentence = choices[userChoice]
var img1 = '<img src="' + links[userChoice] + '">';

output.innerHTML = sentence +img1 +strUservalue;

这是我的 HTML

<body>
  <input type="text" name="" id="currency-from-text" class="form-control"
                            placeholder="Transferring how much?" value="1">
                            <select class="populate-currencies" id="currency-from" onchange="createDoll(this.value)">
                        <option value="USD" id="curr">USD</option>

                        </select>
</body>

我想如果有人选择美国国旗显示的美元，如果他们选择英镑，则会显示英国国旗

【问题讨论】：

我从您的问题中删除了 PHP 标签，因为它无关
"但是当我使用来自 API 的数据时，我的代码不起作用" “不起作用”是什么意思，白页，错误标志？什么 API？
嗨 kerbholz，感谢您的回复，当您选择一种货币时，它显示未定义，并且显示损坏的图像而不是标志
<img src="' + links[userChoice] + '">' 你的数组links 是否有一个键为USD 的元素？
这里是我使用的数组 var links = [ "usd-flat.jpg", "sa-flag.jpg" ];

标签： javascript html

【解决方案1】：

links[USD] 不存在。将您的 links 数组更改为关联数组：

var links = {
   "USD": "https://simplytest.co.za/fxpaymaster/wp-content/uploads/2019/09/usd-flat.jpg",
   "SA": "https://simplytest.co.za/fxpaymaster/wp-content/uploads/2019/09/sa-flag.jpg"
};

<select class="populate-currencies" id="currency-from" onchange="createDoll(this.value)">
  <option value="USD">USD</option>
  <option value="SA">SA</option>
</select>

【讨论】：

如果我以这种方式使用它，它可以工作，但问题是我使用上的值来获取所选货币，以便我转换数据并且该值以纯文本形式出现。链接[USD]
编辑了我的答案。其实，我只是删除第一部分
当我按照你上面显示的方式使用它时，图标不再显示
你在说什么图标？是不是因为我从option 中删除了id="curr"？
当用户选择美元时，例如这个*** /2019/09/usd-flat.jpg 需要显示。它之前显示了一个占位符图标，但是当我使用这样的数组时 var links = { "USD": "***/wp-content/uploads/2019/09/usd-flat.jpg", "SA": " ***/wp-content/uploads/2019/09/sa-flag.jpg" };它不显示任何图标