I'm trying to use jQuery to populate four select fields dinamically parsing a fourlevel json array for a webshop depending on threshold values.
I hope someone could help how to dinamically change the selects only if the given value is bigger than (or equal to) the minimum value of an interval.
There is a simplified verson of the code on fiddle: http://jsfiddle.net/tamben01/844tp5gt/16/
The json array name is prodOpts_0 each of the selects depend on a quantity threshold. (The more the quantity the less the price)
There are four intervals
1 to 19
20 to 49
50 to 99
100 to 999
I'm trying to use the minimum (from) and maximum (to) values from the json array as triggers, but it behaves unexpectedly, I'm not sure how to define if the quantity value is between the proper interval.
The json looks like this
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": ""
}
]
}
]
}
]
}
]
};
The jQuery code is this:
$(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>');
});
}
}
}
}
};
The html is this:
<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>
Basically I use
if (minValue <= $(this).val() && maxValue >= $(this).val()) {
to check if the quantity value is between the minimum and the maximum, but it doesnt work as I expected. Even if it populates the selects on change, it displays wrong values.
It looks like you have set your values as Strings instead of numbers in your json:
"from": "1",
"to": "19",
Therefore in these lines you are setting minValue and maxValue to String values, which will not give the answers you might expect in the rest of your code.
var minValue = prodOpts_0.qty[i].from,
maxValue = prodOpts_0.qty[i].to;