Javascript/Jquery - Calculate values and show inside a div -

i've got write down scheme show trying develop. can see in image below, there radio , select area. depending on users choice on both areas there different values consider in function. red values related dropdown list. if choose op1 , "a" on dropdown, "a" 2160. if choose op3 , "c" on dropdown, "c" 3888 , on. total shown inside #total div , values related choice on radio , dropdown shown inside other 2 divs #subradio , #subdrop (the value been added radio value).

when tried solve end huge list of if's didn't worked @ all, ask guys on problem.

just in case ask, i'll put here code started write:

<form class="form-horizontal text-left" id="meishi">   <div class="form-group">     <div class="col-lg-2 topic">       <label>design</label>     </div>     <div class="col-lg-3">       <label class="radio-inline">         <input type="radio" name="design" value="10800">op1       </label>     </div>     <div class="col-lg-4">       <label class="radio-inline">         <input type="radio" name="design" value="14040">op2       </label>     </div>     <div class="col-lg-3">       <label class="radio-inline">         <input type="radio" name="design" value="16200">op3       </label>     </div>   </div>   <div class="form-group">     <label class="col-lg-2" for="qtt">quantity</label>     <select id="qtt" class="col-lg-3" name="qtt">       <option value="">choose one</option>       <option value="a">100</option>       <option value="b">200</option>       <option value="c">300</option>     </select>   </div> </form>   $(document).ready(function(){   $("#msqtt").change(function(){     var design = $('input[name=design]:checked').val();     var qtt = $("#qtt option:selected").val();     if(design  == "10800" && qtt == "a"){       $('#subradio').text('$ 10800')       $('#subdrop').text('$ 2160')       $('#total').text('$ 12960')     }     else if(design  == "10800" && qtt == "b"){       $('#subradio').text('$ 10800')       $('#subdrop').text('$ 2484')       $('#total').text('$ 13284')     }   }); }); 

thank much!

i hope that's looking demo

<form class="form-horizontal text-left" id="meishi">   <div class="form-group">     <div class="col-lg-2 topic">       <label>design</label>     </div>     <div class="col-lg-3">       <label class="radio-inline">         <input type="radio" data-drop-a="2160" data-drop-b="2484" data-drop-c="2808" name="design" value="10800">op1       </label>     </div>     <div class="col-lg-4">       <label class="radio-inline">         <input type="radio" data-drop-a="2808" data-drop-b="3132" data-drop-c="3456" name="design" value="14040">op2       </label>     </div>     <div class="col-lg-3">       <label class="radio-inline">         <input type="radio" data-drop-a="3240" data-drop-b="3564" data-drop-c="3888" name="design" value="16200">op3       </label>     </div>   </div>   <div class="form-group">     <label class="col-lg-2" for="qtt">quantity</label>     <select id="qtt" class="col-lg-3" name="qtt">       <option value="">choose one</option>       <option value="a">100</option>       <option value="b">200</option>       <option value="c">300</option>     </select>   </div> </form> 

_

<script type="text/javascript"> $(document).ready(function(){   $("input[name=design], #qtt").on('change',function(){     var design = $('input[name=design]:checked');     var designval = parseint(design.val());     var qtt = $("#qtt").val();     var subdrop=parseint(design.data('drop-'+qtt));     if (!subdrop) subdrop=0;     if (!designval) designval=0;     $('#subradio').text(designval)     $('#subdrop').text(subdrop)     $('#total').text(designval+subdrop)   }); }); </script>