Basically just need to write a Jquery/Ajax that fetches Json data (Price data) from server
and appends/overwrites each options text value so it would have the price difference between the
selected option and non selected option on the end of it. Only the non selected option should have the price difference showing on the end of it, see example below.
The code you will find below pretty much does this, but only for the initial onload/document.ready.
I do not know how to store/pass the “data” object out of a functions context without passing it as a parameter to a function i.e OnSucess(data) , I would hope it can be stored in memory and used in any function. Is this at all possible? This would save me having to make a new ajax call each time (‘select’) changes and just use the json data that was returned initially.
Unfortunately $ ('select').change(OnSuccess(data);); will produce error
Also I do not know how to best append the price difference on the end of the option text value, it has to be overwritten I would think, otherwise it would just append to previous string value that already has some price difference on the end of it.
The Json object (data) array is of the format {partid = 3, price = 234}, {partid = 6, price = 53} etc.
List should look like so:
[Intel i7 950] - selected visible option
[Intel i7 960 (+ $ 85)] - not selected but in the drop down list
[Intel i7 930 (- $ 55)] - not selected but in the drop down list
<script type="text/javascript">
$ (document).ready(function () {
var arr = new Array();
$ ('select option').each(function () {
arr.push($ (this).val());
});
$ .ajax({
type: "POST",
url: "/Customise/GetPartPrice",
data: { arr: arr },
traditional: true,
success: function (data) { OnSuccess(data)},
dataType: "json"
});
});
$ ('select').change(OnSuccess);
function OnSuccess(data) {
$ ('select').each(function () {
var sov = parseInt($ (this).find('option:selected').attr('value')) || 0; //Selected option value
var sop; //Selected Option Price
for (i = 0; i <= data.length; i++) {
if (data[i].partid == sov) {
sop = data[i].price;
break;
}
};
$ (this).find('option').each(function () {
var uov = parseInt($ (this).attr('value')) || 0; //Unselected option value
var uop; //Unselected Option Price
for (d = 0; d <= data.length; d++) {
if (data[d].partid == uov) {
uop = data[d].price;
break;
}
}
var newtext = uop - sop;
//var text = $ (this).attr("text");
$ (this).attr("text",newtext);
});
});
};
</script>
