通过选择订单项属性下拉列表来更改产品图片

Question

我尝试使用以下代码来更改产品图片时，来自＆＃34;数据包设计＆＃34;被选中。它必须是订单项属性，因为我已经用完了允许的变体数量。请帮忙，我不知道为什么它不起作用。 This is the product page。谢谢！

HTML 

            <p class="line-item-property__field">
  <label id="packet-design" >Packet Design</label><br>
  <select required class="required" name="properties[Packet Design]" onchange="function2();">
    <option value="big name">big name</option>
    <option value="boho" >boho</option>
    <option value="chic initial">chic initial</option>
    <option value="lattice monogram">lattice monogram</option>
    <option value="monogram block">monogram block</option>
    <option value="peony garden">peony garden</option>
    <option value="simply preppy">simply preppy</option>
    <option value="sweet monogram">sweet monogram</option>
  </select>
</p>


Javascript


function function2(){
    var img = document.getElementById("packet-design");
    var value = img.options[img.selectedIndex].value;
    if(value=="big name"){
        alert(value);
        //grab id"ProductPhotoImg
        //change image to bigName
    }
    else if(value=="boho"){
        alert(value);
      document.getElementById("ProductPhotoImg").src="cdn.shopify.com/s/files/1/1381/3117/products/BOHO-Sorority-Recruitment-Packet_489fd464-c9cc-48de-aaf2-88f9d4e2574c_small.jpg?1484266318";
        //var elem = document.getElementById("ProductPhotoImg");
        //elem.src = cdn.shopify.com/s/files/1/1381/3117/products/BOHO-Sorority-Recruitment-Packet_489fd464-c9cc-48de-aaf2-88f9d4e2574c_small.jpg?v=1484266367;
        //grab id"ProductPhotoImg
        //change image to boho     
    }
    else if(e.value == "chic initial"){
        alert(value);
       //call here any function
    }
        else
        {
        alert(value);
    }
}

        function changeImage(a) {
        document.getElementById("ProductPhotoImg").src=a;
    }