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