select选中后用div显示option中的data-image

Question

想要实现的1:

<input type="number" id="pppri"> 

最终实现的需要再加上

<div id="orignalprice">$449.00</div> 

里面的$449

想要实现的2:
select选中后用div显示option中的data-image

   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>       
 
    <div class="gpo-element gpo-form__group gpo-col-12 show-addon-for-input" data-element-id="select-2">
      <div class="gpo-hidden-data">
         <input type="hidden" data-field-name="select-2" value="snc" id="inputselect-2" name="properties[select-2]" gpo-data-variant-id="snc" gpo-data-product-handle="price" xxm-data-price="xxm">
      </div>
      <label for="select-2" class="gpo-label ">
        <span class="label-content">install</span>
      </label>
      <div class="gpo-select">
        <select data-type="select" id="select-2" class="gpo-select" name="select-2" data-name="properties[select-2]" data-field-name="select-2" is="ms-dropdown" onchange="detail(this,'inputselect-2')">
          <option selected="" disabled="disabled" value="">Please Select</option>
            <option value="embedded" gpo-data-product-handle="price" gpo-data-variant-id="40268730171531" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="10">embedded</option>
            <option value="plug-in" gpo-data-product-handle="price" gpo-data-variant-id="40268730204299" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="20">plug-in</option>
        </select>
      </div>
    </div> 
         
          
    <div class="gpo-element gpo-form__group gpo-col-12 show-addon-for-input" data-element-id="select-3">
      <div class="gpo-hidden-data">
         <input type="hidden" data-field-name="select-3" value="snc3" id="inputselect-3" name="properties[select-3]" gpo-data-variant-id="snc3" gpo-data-product-handle="price" xxm-data-price="xxm3">
      </div>
      <label for="select-3" class="gpo-label ">
        <span class="label-content">install3</span>
      </label>
      <div class="gpo-select">
        <select data-type="select" id="select-3" class="gpo-select" name="select-3" data-name="properties[select-3]" data-field-name="select-3" is="ms-dropdown" onchange="detail(this,'inputselect-3')">
          <option selected="" disabled="disabled" value="">Please Select</option>
            <option value="embedded3" gpo-data-product-handle="price" gpo-data-variant-id="40268730105995" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="30">embedded3</option>
            <option value="plug-in3" gpo-data-product-handle="price" gpo-data-variant-id="40268730138763" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="40">plug-in3</option>
        </select>
      </div>
    </div> 
    
<div id="orignalprice">$449.00</div> 
<input type="number" id="pppri">           
         
<script>          
function detail(xmmy,input_id)
{
    var inputselect = document.getElementById(input_id);
    inputselect.setAttribute("gpo-data-variant-id", $(xmmy).find('option:checked').attr("gpo-data-variant-id"));
    inputselect.setAttribute("value", $(xmmy).find('option:checked').attr("value"));
    inputselect.setAttribute("xxm-data-price", $(xmmy).find('option:checked').attr("xxm-data-price"));
 
    var price = 0;
    $(".gpo-hidden-data input").each(function(){
        price += parseFloat($(this).attr("xxm-data-price")) || 0;
    })
    $("#pppri").val(price);
}
</script>
 
 
 
 

Answer 1

你要在哪个div中显示option中的data-image?

   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>       
 
    <div class="gpo-element gpo-form__group gpo-col-12 show-addon-for-input" data-element-id="select-2">
      <div class="gpo-hidden-data">
         <input type="hidden" data-field-name="select-2" value="snc" id="inputselect-2" name="properties[select-2]" gpo-data-variant-id="snc" gpo-data-product-handle="price" xxm-data-price="xxm">
      </div>
      <label for="select-2" class="gpo-label ">
        <span class="label-content">install</span>
      </label>
      <div class="gpo-select">
        <select data-type="select" id="select-2" class="gpo-select" name="select-2" data-name="properties[select-2]" data-field-name="select-2" is="ms-dropdown" onchange="detail(this,'inputselect-2','img2')">
          <option selected="" disabled="disabled" value="">Please Select</option>
            <option value="embedded" gpo-data-product-handle="price" gpo-data-variant-id="40268730171531" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="10">embedded</option>
            <option value="plug-in" gpo-data-product-handle="price" gpo-data-variant-id="40268730204299" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="20">plug-in</option>
        </select>
      </div>
    </div> 
    <div><img  id="img2" src="初始图片.jpg" alt=""></div>
          
    <div class="gpo-element gpo-form__group gpo-col-12 show-addon-for-input" data-element-id="select-3">
      <div class="gpo-hidden-data">
         <input type="hidden" data-field-name="select-3" value="snc3" id="inputselect-3" name="properties[select-3]" gpo-data-variant-id="snc3" gpo-data-product-handle="price" xxm-data-price="xxm3">
      </div>
      <label for="select-3" class="gpo-label ">
        <span class="label-content">install3</span>
      </label>
      <div class="gpo-select">
        <select data-type="select" id="select-3" class="gpo-select" name="select-3" data-name="properties[select-3]" data-field-name="select-3" is="ms-dropdown" onchange="detail(this,'inputselect-3','img3')">
          <option selected="" disabled="disabled" value="">Please Select</option>
            <option value="embedded3" gpo-data-product-handle="price" gpo-data-variant-id="40268730105995" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="30">embedded3</option>
            <option value="plug-in3" gpo-data-product-handle="price" gpo-data-variant-id="40268730138763" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="40">plug-in3</option>
        </select>
      </div>
    </div> 
    <div><img  id="img3" src="初始图片.jpg" alt=""></div>
    
<div id="orignalprice">$449.00</div> 
<input type="number" id="pppri">           
         
<script>          
function detail(xmmy,input_id,img_id)
{
    var inputselect = document.getElementById(input_id);
    inputselect.setAttribute("gpo-data-variant-id", $(xmmy).find('option:checked').attr("gpo-data-variant-id"));
    inputselect.setAttribute("value", $(xmmy).find('option:checked').attr("value"));
    inputselect.setAttribute("xxm-data-price", $(xmmy).find('option:checked').attr("xxm-data-price"));

    $("#"+img_id).attr("src", $(xmmy).find('option:checked').attr("data-image"));
 
    var price = 0;
    $(".gpo-hidden-data input").each(function(){
        price += parseFloat($(this).attr("xxm-data-price")) || 0;
    });
    price += parseFloat($("#orignalprice").text().slice(1));
    $("#pppri").val(price);
}
</script>
 
 
 

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!