SO - 19120905
by sando ahmad
HTML
<select name="one" id="one">
<option value="0">Select Hotel</option>
<option value="3000">Nirvana</option>
<option value="6000">Laguna</option>
<option value="9000">Palm beach</option>
</select>
<br />
<br />
<select name="two" id="two">
<option>Room Type</option>
</select>
<br/>
<br/>
<p>
<input type="checkbox" name="tri" id="tri" value="50"/>
<label >additional Price</label>
</p>
<br/>
<p>
<input type="checkbox" name="four" id="four" value="100"/>
<label >additional Price</label>
</p>
<div id="total"></div>
JavaScript
// arrays instead of comma separated list and added base key
var data = {
"0": ["Select Room type"],
"3000": ["economist_0", "executive_465", "businesse_984"],
"6000": ["economist_200", "executive_700", "businesse_800"],
"9000": ["economist_400", "executive_800", "businesse_900"]
}
$("#one").change(function () {
var first = $(this),
second = $("#two"),
third = $("#tri"),
third = $("#four"),
key = first.val(),
// instead of the original switch code
vals = data[key] == undefined ? data.base : data[key],
html = [];
// create insert html before adding
$.each(vals, function (i, val) {
var v = val.split('_');
html.push('<option value="' + v[1] + '">' + v[0] + '</option>')
});
// no need to empty the element before adding the new content
second.html(html.join());
});
$("#one,#two,#tri,#four").change(function () {
var val1 = parseInt($('#one').val()) || 0,
val2 = parseInt($('#two').val()) || 0,
val3 = parseInt($('#tri').val()) || 0,
val4 = parseInt($('#four').val()) || 0;
if($('#tri').is(':checked'))
val3 = parseInt($('#tri').val());
else if($('#four').is(':checked'))
val4 = parseInt($('#four').val());
else
val3 = 0;
val4 = 0;
console.log(val1);
console.log(val2);
console.log(val3);
console.log(val4);
$('#total').text(val1 + val2 + val3 + val4)
})