根据下拉菜单更改图像 src答案

【问题标题】：change image src based on dropdown menu根据下拉菜单更改图像 src
【发布时间】：2017-08-07 20:49:13
【问题描述】：

我正在使用 Shopify 平台，我尝试将标志图像添加到我的货币转换器

以下是我的货币转换器代码

<select id="currencies" class="currencies" name="currencies" data-default-shop-currency="{{ shop.currency }}">
  {% capture codes %},USD,EUR,GBP,CAD,ARS,AUD,ILS,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK,{% endcapture %}
  {% assign supported_codes = settings.supported_currencies | split: ' ' %}
  <option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>
  {% for code in supported_codes %}
    {% if code != shop.currency and codes contains code %}
    <option value="{{ code }}">{{ code }}</option>
    {% endif %}
  {% endfor %}
</select>

这是我制作的 Java：

var flagsArray = [
  "https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/usa.png?18222330839739856022", // USD,
  "https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/GBP.png?10208443253961150348", // GBP,
  "https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/ILS.png?16971579683524372576"  // ILS ...
];

$('#currencies').change(function(){
  $('#flags')[0].src = flagsArray[this.value];
});

当值改变时它应该改变图片。

（价值 MOST 为 USD、GBP 等...不能是数字，因为这是货币兑换商 bulid 的方式）

这是我改变货币时应该改变的img：

&lt;img id="flags" src='//cdn.shopify.com/s/files/1/2078/5043/t/59/assets/usa.png?18222330839739856022'&gt;

我不知道我做错了什么，如果有人能告诉我，那就太好了:) 谢谢:)

【问题讨论】：

为什么这被标记为java？ HTML 页面中使用的语言是什么？

标签： javascript java jquery html css

【解决方案1】：

您使用的是数组的值而不是数组的索引。您可以使用.indexOf() 或.findIndex() 来获取与select 元素的当前值匹配的数组索引，您似乎在其中设置了value 元素的value 属性

<option value="{{ code }}">{{ code }}</option>

到在 JavaScript 的 flagsArray 元素处设置的字符串，而不是与应引用的 flagsArray 的索引对应的索引

flagsArray[flags.indexOf(this.value)];

或

flagsArray[flags.findIndex(function(text){return text === this.value})];

或者，您可以将<option>元素的value设置为应匹配的数组索引

<option value="{{ index //? }}">{{ code }}</option>

为了能够使用当前代码

【讨论】：

【解决方案2】：

对不起，伙计们，它不起作用。我尝试另一个技巧，

onchange="$('#flags').attr('src', this.options[this.selectedIndex].value);"

但是现在，图像 src 更改为 VALUE 的名称 enter image description here

我如何使这个命令从以下位置获取 src：

var flagsArray = [
  "https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/usa.png?18222330839739856022", // USD,
  "https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/GBP.png?10208443253961150348", // GBP,
  "https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/ILS.png?16971579683524372576"  // ILS ...
];

谢谢

【讨论】：