Vprašanje za java kalkulator

Rad bi spremenil kodo za java kalkulator. Celotna koda je na tem naslovu: https://jsfiddle.net/7vmtuzsL/2/

Podatki so v takšni strukturi:

HTML:
<select id="zivila1">
<option value="0,0,0,0">Izberite živilo</option>
<option value="110,1.24,0,23.09">Piščanja prsa</option>
<option value="18,0.2,3.92,0.88">Paradižnik</option>
<option value="374,1.04,80.43,8.11">Riž</option>
</select>
<select id="kolicina1">
<option value="1">100g</option>
<option value="2">200g</option>
<option value="3">300g</option>
</select>

javascript:

var sumKalorije=0;
var sumMascobe=0;
var sumOh=0;
var sumBeljakovine=0;

Ker je to nepregledno, če daš približno 20 različnih podatkov, me zanima kako bi spremenil kodo da bi bilo v takšni strukturi v HTMLju:

<select id="zivila1">
  <option data-kalorije="110" data-mascobe="1.24" data-oh="0" data-beljakovine="23.09">Piščančja prsa</option>
  <option data-kalorije="18" data-mascobe="0.2" data-oh="3.92" data-beljakovine="0.88">Paradižnik</option>
  <option data-kalorije="374" data-mascobe="1.04" data-oh="80.43" data-beljakovine="8.11">Riž</option>
</select>

Vse kar bi rad, da je označeno za vse številke ali so to beljakovine, maščobe, ogljikovi hidrati ali kalorije. Pri 20 različnih podatkih se človek ne znajde, če bi ostalo tako kot je v prvotni kodi.

Kakšne ideje?

$('#zivila1').change(function(){
       var selected = $(this).find('option:selected');
       var kalorije = selected.data('kalorije'); 
       ...
});

Vprašanje glede java kalkulatorja

Eno leto je mimo, pa še nisi ugotovil razlike med Javo in JavaScriptom?

Tudi javascript je programski jezik. Je pa čisto druga zadeva kot Java. Zato ni vseeno, ali ti napišeš java ali javascript.

Drugače pa, kar se tiče osvnonega vprašanja...
Princip je zgrešen. Podatkov o posameznem živilu ne hrani na clientu v takšnih obliki, kot prikazuješ (v atributih HTML elementov).

Namesto tega, za vsak "option" določi identifikator in ga hrani v "value" atributu. Nato pa boš na userjevo izbiro opcije, preko identifikatorja, pridobil podatek iz baze preko API klica. S pridobljenimi vrednostmi pa lahko potem kalkuliraš.

HTML

<select id="zivila1">
<option value="0,0,0,0">Izberite živilo</option>
<option value="123">Piščanja prsa</option>
<option value="321">Paradižnik</option>
<option value="456">Riž</option>
</select>
<select id="kolicina1">
<option value="1">100g</option>
<option value="2">200g</option>
<option value="3">300g</option>
</select>

Potem lahko na clientu uporabiš npr. jQuery knjižnico z AJAX klici, da pridobiš podatek preko HTTP klica iz PB.
Recimo, da uporabnik izbere opcijo Paradižnik. Najprej pridobiš izbran option in njegov value. Nato pa ta identifkator pošlješ v HTTP zahtevo.
JS

$.get("http://mojapi.si/api/foods/321", function(data, status){
        console.log("Data: " + data + "\n Status: " + status);
    });

Za tak pristop potrebuješ tudi server side del, kjer ti bo laufal web service. Poglej si npr. "nodejs rest api".

Odvisno kaj bi rad naredu. Verjetno pa ni smiselno računat na več decimalk kot jih imaš v osnovi. Zakaj torej to delaš?

Enkrat ko pogruntaš da moraš vpisati javascript in ne java, je take stvari trivialno poiskati na iskalniku. Namesto da tukaj čakaš ure ali dneve na odgovor, ga imaš v parih sekundah.