Ik heb helaas nog niet zoveel kaas gegeten van Javascript en jQuery dus hopelijk kan iemand mij helpen.
Ik probeer een soort bestel pagina te maken waarmee ik uit een lijst verschillende opties kan selecteren, de hoeveel kan pakken en eventueel een korting kan invullen zodat er daarna dynamisch de kosten berekend worden. Dat is ook heel goed gelukt m.b.v. de jQuery Calx plugin. Gaat goed. Nu wil in dit echter opslaan in een database onder een id nummer. Dat id nummer voeg ik toe middels een data-attribute (Zie de list hieronder) deze doe ik daarna weergeven in een hidden field en deze sla ik op in de database. Het weergeven van 1 regel lukt mij middels het onderstaande script. Echter op het moment dat ik 2 regels wil toevoegen wordt de waarde van veld 1 telkens overschreven. Hoe kan ik dit oplossen?
http://jsfiddle.net/by46suux/
<select name="item1" id="item1" >
<optgroup label="Cat 1">
<option value="27.50" data-id1="1">optie 1</option>
<option value="25.50" data-id1="2">optie 2</option>
<option value="23.50" data-id1="3">optie 3</option>
</optgroup>
<optgroup label="Cat 2">
<option value="27.50" data-id1="4">optie 4</option>
<option value="25.50" data-id1="5">optie 5</option>
<option value="23.50" data-id1="6">optie 6</option>
</optgroup>
</select>
<input id="id1" name="id1" type="text" />
<script language="javascript">
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$("#id1").val(selected.data('id1'));
}).change();
});
</script>
<select name="item2" id="item2" >
<optgroup label="Cat 1">
<option value="27.50" data-id2="1">optie 1</option>
<option value="25.50" data-id2="2">optie 2</option>
<option value="23.50" data-id2="3">optie 3</option>
</optgroup>
<optgroup label="Cat 2">
<option value="27.50" data-id2="4">optie 4</option>
<option value="25.50" data-id2="5">optie 5</option>
<option value="23.50" data-id2="6">optie 6</option>
</optgroup>
</select>
<input id="id2" name="id2" type="text" />
<script language="javascript">
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$("#id2").val(selected.data('id2'));
}).change();
});
</script>
Alvast bedankt!
1.379 views