一个简单的数量下拉选项与价格和按钮链接的变化

Question

我正在尝试创建一个包含3个选项的下拉列表。我想要价格变化，以及按钮中选项变化的链接。有什么建议吗？谢谢

<form method="post" action="/" class="product-item">
<input type="hidden" value="10" name="price">
<select id="menu" name="quantity" class="product-select" tabindex="1">
<option class="list" value="1" value="google.com">1</option>
<option class="list" value="2" value="youtube.com">3</option>
<option class="list" value="3" value="pinterest.com/">6</option>
</select>
<div class="total-price">10</div>
</form>
<button id="desktop" onclick="gotosite()">
BUY NOW
</button>
<button id="desktop" onclick="gotosite()">
BUY NOW
</button>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"> 
</script>
<script>
jQuery('.product-select').on('change', function() {
var el = $(this);
var quantity = parseInt(el.val());
var price = parseInt(el.closest('.product- 
item').find('[name="price"]').val());
el.closest('.product-item').find('.total-price').text(quantity * price);
});
function gotosite() {
window.location = document.getElementById("menu").value;
}
</script>

Answer 1

运行此程序时，请尝试第三个选项！

$(document).ready(function(){

$('.product-select').on('change', function() {
var el = $(this);
var x = document.getElementById("menu").value;
var quantity = [1,3,6];
var price = parseInt(el.closest('.product-item').find('[name="price"]').val());
var sum = (quantity[x] * price);
//document.getElementById('total-price').innerHTML=sum;
$("#total-price").text(sum);
});
function gotosite() {
var x = document.getElementById("menu").value;
var urls =['https://google.com','https://yahoo.com','https://stackoverflow.com'];
window.location=urls[x];
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="/" class="product-item">
<input type="hidden" value="10" name="price">
<select id="menu" name="quantity" class="product-select" tabindex="1">
<option class="list" value="0" >1</option>
<option class="list" value="1" >3</option>
<option class="list" value="2" >6</option>
</select>
<div id="total-price">10</div>
</form>
<button id="desktop1" onclick="gotosite()">
BUY NOW
</button>
<button id="desktop2" onclick="gotosite()">
BUY NOW
</button>