我正在尝试使用jQuery来填充四个选择字段，根据阈值，为网上商店分析四级json数组。
我希望只有当给定值大于（或等于）间隔的最小值时，才有人可以帮助如何动态更改选择。
有一个简化的小提琴代码： http://jsfiddle.net/tamben01/844tp5gt/16/
json数组名称为prodOpts_0，每个选项都取决于数量阈值。 （数量越多，价格越低）
有四个间隔
1到19
20到49
50到99
100至999
我正在尝试使用json数组中的最小值（from）和最大值（to）作为触发器，但它的行为意外，我不知道如何定义数量值是否在正确的时间间隔之间。
json看起来像这样
var prodOpts_0 = {
"qty": [
{
"option_name": "1",
"from": "1",
"to": "19",
"size": [
{
"name": "18x24",
"id": "18x24_1",
"value": "18x24_1",
"label": "18h x 24w",
"selected": "",
"price": "",
"shipping": [
{
"name": "Ground Shipping",
"value": "18x24_1_ground",
"label": "Ground Shipping",
"price": "3",
"selected": ""
},
{
"name": "2nd Day Shipping",
"value": "18x24_1_2nd",
"label": "2nd Day Shipping",
"price": "5",
"selected": ""
},
{
"name": "Next Day Shipping",
"value": "18x24_1_next",
"label": "Next Day Shipping",
"price": "7",
"selected": ""
},
],
"media": [
{
"name": "3mm Coroplast",
"id": "18x24_1_coroplast",
"value": "18x24_1_coroplast",
"label": "3mm Coroplast",
"price": "0",
"selected": "",
"extras": [
{
"name": "None (No Stakes)",
"id": "none_18x24_1_coroplast",
"value": "none_18x24_1_coroplast",
"label": "None (No Stakes)",
"price": "0",
"selected": ""
},
{
"name": "With Stakes",
"id": "stakes_18x24_1_coroplast",
"value": "stakes_18x24_1_coroplast",
"label": "With Stakes",
"price": "2",
"selected": ""
}
]
}
]
}
]
},
{
"option_name": "20",
"from": "20",
"to": "49",
"size": [
{
"name": "18x24",
"id": "18x24_20",
"value": "18x24_20",
"label": "18h x 24w",
"selected": "",
"price": "0",
"shipping": [
{
"name": "Ground Shipping",
"value": "18x24_20_ground",
"label": "Ground Shipping",
"price": "3",
"selected": ""
},
{
"name": "2nd Day Shipping",
"value": "18x24_20_2nd",
"label": "2nd Day Shipping",
"price": "4",
"selected": ""
},
{
"name": "Next Day Shipping",
"value": "18x24_20_next",
"label": "Next Day Shipping",
"price": "7",
"selected": ""
},
],
"media": [
{
"name": "3mm Coroplast",
"id": "18x24_20_coroplast",
"value": "18x24_20_coroplast",
"label": "3mm Coroplast",
"price": "0",
"selected": "",
"extras": [
{
"name": "None (No Stakes)",
"id": "none_18x24_20_coroplast",
"value": "none_18x24_20_coroplast",
"label": "None (No Stakes)",
"price": "0",
"selected": ""
},
{
"name": "With Stakes",
"id": "stakes_18x24_20_coroplast",
"value": "stakes_18x24_20_coroplast",
"label": "With Stakes",
"price": "2",
"selected": ""
},
]
}
]
}
]
},
{
"option_name": "50",
"from": "50",
"to": "99",
"size": [
{
"name": "18x24",
"id": "18x24_50",
"value": "18x24_50",
"label": "18h x 24w",
"selected": "",
"price": "0",
"shipping": [
{
"name": "Ground Shipping",
"value": "18x24_50_ground",
"label": "Ground Shipping",
"price": "2",
"selected": ""
},
{
"name": "2nd Day Shipping",
"value": "18x24_50_2nd",
"label": "2nd Day Shipping",
"price": "4",
"selected": ""
},
{
"name": "Next Day Shipping",
"value": "18x24_50_next",
"label": "Next Day Shipping",
"price": "6",
"selected": ""
}
],
"media": [
{
"name": "3mm Coroplast",
"id": "18x24_50_coroplast",
"value": "18x24_50_coroplast",
"label": "3mm Coroplast",
"price": "0",
"selected": "",
"extras": [
{
"name": "None (No Stakes)",
"id": "none_18x24_50_coroplast",
"value": "none_18x24_50_coroplast",
"label": "None (No Stakes)",
"price": "0",
"selected": ""
},
{
"name": "With Stakes",
"id": "stakes_18x24_50_coroplast",
"value": "stakes_18x24_50_coroplast",
"label": "With Stakes",
"price": "2",
"selected": ""
}
]
}
]
}
]
},
{
"option_name": "100",
"from": "100",
"to": "99999",
"size": [
{
"name": "18x24",
"id": "18x24_100",
"value": "18x24_100",
"label": "18h x 24w",
"selected": "",
"price": "0",
"shipping": [
{
"name": "Ground Shipping",
"value": "18x24_100_ground",
"label": "Ground Shipping",
"price": "2",
"selected": ""
},
{
"name": "2nd Day Shipping",
"value": "18x24_100_2nd",
"label": "2nd Day Shipping",
"price": "3",
"selected": ""
},
{
"name": "Next Day Shipping",
"value": "18x24_100_next",
"label": "Next Day Shipping",
"price": "5",
"selected": ""
},
],
"media": [
{
"name": "3mm Coroplast",
"id": "18x24_100_coroplast",
"value": "18x24_100_coroplast",
"label": "3mm Coroplast",
"price": "0",
"selected": "",
"extras": [
{
"name": "None (No Stakes)",
"id": "none_18x24_100_coroplast",
"value": "none_18x24_100_coroplast",
"label": "None (No Stakes)",
"price": "0",
"selected": ""
},
{
"name": "With Stakes",
"id": "stakes_18x24_100_coroplast",
"value": "stakes_18x24_100_coroplast",
"label": "With Stakes",
"price": "2",
"selected": ""
}
]
}
]
}
]
}
]
};
jQuery代码是这样的：
$(document).ready(function() {
$('#qty_0').change(loadSizeShippingOptions_0);
$.proxy(loadSizeShippingOptions_0, $('#qty_0'))();
$('#size_options').change(loadShippingOptions_0);
$.proxy(loadShippingOptions_0, $('#size_options'))();
$('#media_options').change(loadExtraOptions_0);
$.proxy(loadExtraOptions_0, $('#media_options'))();
});
function loadSizeShippingOptions_0() {
for (var i = 0; i < prodOpts_0.qty.length; i++) {
var minValue = prodOpts_0.qty[i].from,
maxValue = prodOpts_0.qty[i].to;
if (minValue <= $(this).val() && maxValue >= $(this).val()) {
$('#size_options').html('');
$.each(prodOpts_0.qty[i].size, function(index, value) {
$("#size_options").append('<option ' + value.selected + ' value="' + value.value + '">' + value.label + '</option>');
for (var s = 0; s < prodOpts_0.qty[i].size.length; s++) {
if (prodOpts_0.qty[i].size[s].id == $("#size_options").val()) {
$('#shipping_variables').html('');
$.each(prodOpts_0.qty[i].size[s].shipping, function(index, value) {
$("#shipping_variables").append('<option ' + value.selected + ' value="' + value.value + '">' + value.label + ' + $' + value.price + '</option>');
});
}
}
for (var m = 0; m < prodOpts_0.qty[i].size.length; m++) {
if (prodOpts_0.qty[i].size[m].id == $("#size_options").val()) {
$('#media_options').html('');
$.each(prodOpts_0.qty[i].size[m].media, function(index, value) {
$("#media_options").append('<option ' + value.selected + ' value="' + value.value + '">' + value.label + '</option>');
for (var x = 0; x < prodOpts_0.qty[i].size[m].media.length; x++) {
if (prodOpts_0.qty[i].size[m].media[x].id == $("#media_options").val()) {
$('#extra_variables').html('');
$.each(prodOpts_0.qty[i].size[m].media[x].extras, function(index, value) { //console.log("prodOpts_0.qty[i].size[m].media[x].extras");
$("#extra_variables").append('<option ' + value.selected + ' value="' + value.value + '">' + value.label + '</option>');
});
}
}
});
}
}
});
}
}
};
function loadShippingOptions_0() {
for (var i = 0; i < prodOpts_0.qty.length; i++) {
/***************/
for (var s = 0; s < prodOpts_0.qty[i].size.length; s++) {
if (prodOpts_0.qty[i].size[s].id == $("#size_options").val()) {
$('#shipping_variables').html('');
$.each(prodOpts_0.qty[i].size[s].shipping, function(index, value) {
$("#shipping_variables").append('<option ' + value.selected + ' value="' + value.value + '">' + value.label + ' + $' + value.price + '</option>');
});
}
}
/***************/
for (var m = 0; m < prodOpts_0.qty[i].size.length; m++) {
if (prodOpts_0.qty[i].size[m].id == $("#size_options").val()) {
$('#media_options').html('');
$.each(prodOpts_0.qty[i].size[m].media, function(index, value) {
$("#media_options").append('<option ' + value.selected + ' value="' + value.value + '">' + value.label + '</option>');
for (var x = 0; x < prodOpts_0.qty[i].size[m].media.length; x++) {
if (prodOpts_0.qty[i].size[m].media[x].id == $("#media_options").val()) {
$('#extra_variables').html('');
$.each(prodOpts_0.qty[i].size[m].media[x].extras, function(index, value) {
$("#extra_variables").append('<option ' + value.selected + ' value="' + value.value + '">' + value.label + '</option>');
});
}
}
});
}
}
}
};
function loadExtraOptions_0() {
for (var i = 0; i < prodOpts_0.qty.length; i++) {
for (var m = 0; m < prodOpts_0.qty[i].size.length; m++) {
for (var x = 0; x < prodOpts_0.qty[i].size[m].media.length; x++) {
if (prodOpts_0.qty[i].size[m].media[x].id == $("#media_options").val()) {
$('#extra_variables').html('');
$.each(prodOpts_0.qty[i].size[m].media[x].extras, function(index, value) {
$("#extra_variables").append('<option ' + value.selected + ' value="' + value.value + '">' + value.label + '</option>');
});
}
}
}
}
};
html是这样的：
<div class="form_line">
<label>Quantity</label>
<input type="number" name="quantity[0]" id="qty_0" value="1" min="1" max="999" step="1"/>
</div>
<div class="form_line">
<label>Size</label>
<select id="size_options" name="size_options">
<option value=''>Choose size</option>
</select>
</div>
<div class="form_line">
<label>Media</label>
<select id="media_options" name="media_options">
<option value=''>Choose media</option>
</select>
</div>
<div class="form_line">
<label>Extras</label>
<select id="extra_variables" name="extra_variables">
<option value=''>Choose extra</option>
</select>
</div>
<div class="form_line">
<label>Shipping</label>
<select id="shipping_variables" name="shipping_variables">
<option value=''>Select shipping</option>
</select>
</div>
基本上我用
if (minValue <= $(this).val() && maxValue >= $(this).val()) {
检查数量值是否在最小值和最大值之间，但它不能像我预期的那样工作。即使它在更改时填充选择，也会显示错误的值。
答案 0 :(得分：0)
看起来您已将值设置为字符串而不是json中的数字：
"from": "1",
"to": "19",
因此，在这些行中，您将minValue和maxValue设置为字符串值，这将无法提供您在其余代码中可能获得的答案。
var minValue = prodOpts_0.qty[i].from,
maxValue = prodOpts_0.qty[i].to;