Uitlezen data-attribute uit option (jQuery)
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!
Gewijzigd op 22/01/2015 20:25:50 door Pascal Wesie
Gewijzigd op 22/01/2015 21:05:29 door Pascal Wesie
Is dit met data-id1 ook niet zo toevallig of mag deze wel 6 keer voorkomen op een pagina ?
na data- mag je het aanvullen met een naam die je toepasselijk vindt en waardes mogen meerdere malen hetzelfde zijn.
denk aan een webshop waarbij data-price gebruikt wordt en er meerdere artikelen kunnen zijn die dezelfde prijs hebben.
Door de regel: selected = $(this) werd alleen naar de laatst geselecteerd gekeken.
Dit heb ik vervangen een unieke variabele en this vervangen door #item1.
$(function(){
$('select').change(function(){
var item1 = $('#item1').find('option:selected');
$("#id1").val(item1.data('id1'));
}).change();
});
$(function(){
$('select').change(function(){
var item2 = $('#item2').find('option:selected');
$("#id2").val(item2.data('id2'));
}).change();
});
http://jsfiddle.net/by46suux/2/