西西木科技丨Shopify开发机构 2022-05-14 18:14 采纳率: 96.4%
浏览 48
已结题

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

想要实现的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>
 
 
 
 

  • 写回答

2条回答 默认 最新

  • 关注

    你要在哪个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>
     
     
     
    

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

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月23日
  • 已采纳回答 5月15日
  • 创建了问题 5月14日

悬赏问题

  • ¥15 我想通过python处理sybase IQ库的一些数据,但是不知道sybase IQ库怎么连接,之前连接都是用linux上的 dbisql
  • ¥15 安装llama-cpp-python==0.1.83失败
  • ¥20 管道轴向耦合水击问题
  • ¥60 补全networkx TODO部分。
  • ¥15 有内推吗,云计算linux运维方向
  • ¥30 sort cuteSV.vcf by bcftools用IGV可视化出现报错
  • ¥100 SOS!对STK中导出的天体图像进行质心提取有没有人做过啊
  • ¥15 python 欧式距离
  • ¥15 遗传算法解决有工序顺序约束的大规模FJSP问题
  • ¥15 企业消防水炮塔设计方案