基本上只需要编写一个jQuery/Ajax,它从服务器获取Json数据(Price数据),并附加/覆盖每个选项文本值,以便在其末尾显示所选选项和未选中选项之间的价格差异。只有未选中的选项才会在其末尾显示差价,请参见下面的示例。
你可以在下面的代码中找到这一点,但我似乎无法正确地将其附加/覆盖到选项文本值的末尾,而不是在下拉列表的每次更改时将价格差异重复(而不是替换)到末尾。所以我得到了产品name025252525等。
我也不知道如何不将差异附加到所选的选项文本上,现在我只是在那里得到了"0“,因为它从自身减去了自己。
Json对象(数据)数组的格式为{partid = 3, price = 234}, {partid = 6, price = 53}等。
列表应如下所示:
[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) { mydata = data; OnSuccess(data) },
dataType: "json"
});
});
$('select').change(function () { OnSuccess(mydata); });
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 () {
// $(this).append('<span></span>');
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 xtext = $(this).text().toString();
$(this).attr("text", xtext + newtext);
// mob.append(newtext)
// $(this).next('span').html(newtext);
});
});
};
//$(document).ready(function () { $("#partIdAndCount_0__PartID").prepend('<option value="0">Select Processor<option>'); });
</script>发布于 2011-08-14 09:18:37
你已经接近了:
$.ajax({
type: "POST",
url: "/Customise/GetPartPrice",
data: { arr: arr },
traditional: true,
success: OnSuccess,
dataType: "json"
});OnSuccess是一个接受一个参数data的函数。所以您只需使用上述方法即可。
如果像$('select').change(OnSuccess(data));一样修复,$('select').change(OnSuccess(data););将会编译,去掉函数中的分号。但是,这将立即执行OnSuccess。再说一次,$('select').change(OnSuccess);是您想要的。
发布于 2011-08-14 09:22:24
声明一个变量以将其存储在外部作用域中:
var theJSON;
$(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) { theJSON = data; OnSuccess(theJSON)},
dataType: "json"
});
});
$('select').change(function(){ OnSuccess(theJSON); });https://stackoverflow.com/questions/7054349
复制相似问题