西西木科技丨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 MATLAB卫星二体模型仿真
  • ¥15 怎么让数码管亮的同时让led执行流水灯代码
  • ¥20 SAP HANA SQL Script 。如何判断字段值包含某个字符串
  • ¥85 cmd批处理参数如果含有双引号,该如何传入?
  • ¥15 fx2n系列plc的自控成型机模拟
  • ¥15 时间序列LSTM模型归回预测代码问题
  • ¥50 使用CUDA如何高效的做并行化处理,是否可以多个分段同时进行匹配计算处理?目前数据传输速度有些慢,如何提高速度,使用gdrcopy是否可行?请给出具体意见。
  • ¥15 基于STM32,电机驱动模块为L298N,四路运放电磁传感器,三轮智能小车电磁组电磁循迹(两个电机,一个万向轮),如何通过环岛的原理及完整代码
  • ¥20 机器学习或深度学习问题?困扰了我一个世纪,晚来天欲雪,能饮一杯无?
  • ¥15 c语言数据结构高铁订票系统