Ich möchte bei Auswahl einer Kategorie die dazu angezeigte Produkte in die Auswahlliste hinzufügen und die gesamtsumme berechnen.
Hat jemand eine Idee?
Hat jemand eine Idee?
HTML:
<html><head>
<style>
select {
min-width: 150px;
min-height: 150px;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function img(x) {
if (x == 0) {
document.getElementById('img4').style.display = 'none';
document.getElementById('img3').style.display = 'none';
document.getElementById('img2').style.display = 'none';
document.getElementById('img1').style.display = 'block';
} else if (x == 2){
document.getElementById('img1').style.display = 'none';
document.getElementById('img2').style.display = 'block';
document.getElementById('img3').style.display = 'none';
document.getElementById('img4').style.display = 'none';
}else if (x == 3){
document.getElementById('img1').style.display = 'none';
document.getElementById('img2').style.display = 'none';
document.getElementById('img3').style.display = 'block';
document.getElementById('img4').style.display = 'none';
}else {
document.getElementById('img1').style.display = 'none';
document.getElementById('img2').style.display = 'none';
document.getElementById('img3').style.display = 'none';
document.getElementById('img4').style.display = 'block';
}
}
</script>
<div>Tariftyp</div>
<input type="radio" name="img" onclick="img(0)" checked="">
Neukunden
<input type="radio" name="img" onclick="img(2)">
Bestandskunden
<input type="radio" name="img" onclick="img(3)">
Junge Leute
<input type="radio" name="img" onclick="img(4)">
Selbständig
<div id="img1" style="display: block;">
<select name="selectfrom" id="select-from" multiple="" size="5">
<option value="22.99">Product S</option>
<option value="27.99">Product S Boost</option>
<option value="32.99">Product M</option>
<option value="37.99">Product M Boost</option>
<option value="42.99">Product L</option>
<option value="47.99">Product L Boost</option>
<option value="62.99">Product XL</option>
</select>
</div>
<div id="img2" style="display: none;">
<select name="selectfrom2" id="select-from2" multiple="" size="5">
<option value="12.99">Product S YP</option>
<option value="12.99">Product S Boost YP</option>
<option value="22.99">Product M YP</option>
<option value="22.99">Product M Boost YP</option>
<option value="32.99">Product L YP</option>
<option value="32.99">Product L Boost YP</option>
<option value="52.99">Product XL YP</option>
</select>
</div>
<div id="img3" style="display: none;">
<select name="selectfrom3" id="select-from3" multiple="" size="5">
<option value="11.49">Product S KB</option>
<option value="13.99">Product S Boost KB</option>
<option value="16.49">Product M KB</option>
<option value="18.99">Product M Boost KB</option>
<option value="21.49">Product L KB</option>
<option value="23.99">Product L Boost KB</option>
<option value="31.49">Product XL KB</option>
</select>
</div>
<div id="img4" style="display: none;">
<select name="selectfrom4" id="select-from4" multiple="" size="5">
<option value="20.69">Product S SoHo</option>
<option value="25.19">Product S Boost SoHo</option>
<option value="29.69">Product M SoHo</option>
<option value="34.19">Product M Boost SoHo</option>
<option value="38.69">Product L SoHo</option>
<option value="43.19">Product L Boost SoHo</option>
<option value="56.69">Product XL SoHo</option>
</select>
</div>
<a href="#" class="btn add">Add »</a>
<a href="#" class="btn remove">« Remove</a>
<select name="selectto" id="select-to" multiple="" size="5"></select>
<input type="text" name="class" value="0" id="total">
<script type="text/javascript">
$(() => {
const $totalField = $('#total');
const calcTotal = () => {
let total = $('#select-to option')
.map((i, el) => +el.value)
.get()
.reduce((a, b) => a + b, 0)
return total > 0 ? total + 99 : total;
};
$('.btn').on('click', (e) => {
e.preventDefault();
const tgt = e.target.closest('.btn');
if (!tgt) return; // not a button
if (tgt.matches('.add'))
if($("select").attr("id") == "select-from"){
$('#select-from option:selected').clone().appendTo('#select-to');
}else if($("select").attr("id") == "select-from1"){
$('#select-from1 option:selected').clone().appendTo('#select-to');
}else if($("select").attr("id") == "select-from2"){
$('#select-from2 option:selected').clone().appendTo('#select-to');
}else if($("select").attr("id") == "select-from3"){
$('#select-from3 option:selected').clone().appendTo('#select-to');
}else if($("select").attr("id") == "select-from4"){
$('#select-from4 option:selected').clone().appendTo('#select-to');
}
else $('#select-to option:selected').remove();
$totalField.val(calcTotal().toFixed(2));
});
});
</script>
</body></html>