erikTsomik
asked on
JSON help
I am trying to create a JSON to create a related drop downs. AND I got it to work. Now i need to add redirect to the JSON. So if the first drop down select option 2 it's pull the second row from the JSON which is this "2": "New Driver Training,Supplemental Training", and process the list to make a drop down options of 2 elements. And now if the user select for example Supplemental Training I need to redirect them to a different page.
{
"1": "New Driver Training",
"2": "New Driver Training,Supplemental Training",
"3": "Supplemental Training,Manual Transmission Training, Senior Refresher Training"
}
ASKER
I have already provided the JSON
so here is the code
so here is the code
$("#first-choice").change(function() {
var $dropdown = $(this);
$.getJSON("data.json", function(data) {
var key = $dropdown.val();
var vals = [];
switch(key) {
case '1':
vals = data[1].split(",");
break;
case '2':
vals = data[2].split(",");
break;
case '3':
vals = data[3].split(",");
break;
case 'base':
vals = ['Please choose from above'];
}
var $secondChoice = $("#second-choice");
$secondChoice.empty();
$.each(vals, function(index, value) {
$secondChoice.append("<option>" + value + "</option>");
});
});
});
Do you have to use the JSON you provided or can you change it to be like the sample I provided?
ASKER
We can change the JSON
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I have tried your solution but it is does not work for me . I set the first drop down as a static and changed the JSON file
[{
"1": "Option 1",
"subOptions": [{
"1": "New Driver Training",
"url": "http://someurl.com"
}]
},{
"2": "Option 2",
"subOptions": [{
"1": "New Driver Training",
"url" : "http://someotherurl.com"
},{
"2": "Supplemental Training",
"url" : "http://someotherurl.com"
}]
},{
"3": "Option 3",
"subOptions": [{
"3": "Supplemental Training",
"url" : "http://someotherurl333.com"
},{
"4": "Manual Transmission Training",
"url" : "http://someotherurlabc.com"
},{
"5": "Senior Refresher Training",
"url" : "http://someotherurlabcdef.com"
}]
}]
$(function() {
$.getJSON("data.json", function(data) {
// REGISTER CHANGE EVENT HANDLER ON first-choice
$('body').on('change', '#first-choice', function(i,e) {
// GET VALUE OF SELECTED (index into data array)
var idx = $(this).val();
alert(data);
alert(idx);
// LOAD subOptions FROM data ARRAY USING index
var options = data[idx].subOptions;
alert(options);
// EMPTY second-choice READY FOR NEW <option>'s
$('#second-choice').empty();
// CREATE NEW OPTIONS WITH index IN subOptions AS VALUE
$.each(options, function(j,k) {
$('#second-choice').append(
$('<option/>', {value: j}).html(k.option)
)
});
});
});
});
ASKER
How would I append data-url to the option element of the second drop down
so it looks something like this
<select id="second-choice" class="form-control" required="required">
<option value="0" data-url="pagename.html">S upplementa l Training</option>
<option value="1" data-url="pagename.html">M anual Transmission Training</option>
<option value="2" data-url="pagename.html">S enior Refresher Training</option>
</select>
and page name is coming from json file
so it looks something like this
<select id="second-choice" class="form-control" required="required">
<option value="0" data-url="pagename.html">S
<option value="1" data-url="pagename.html">M
<option value="2" data-url="pagename.html">S
</select>
and page name is coming from json file
$.each(options, function(j,k) {
$('#second-choice').append(
$('<option/>', {value: j}).html(k.option)
)
});
There is no need to change the JSON file - you can remove the option property if you wish but you must keep the index the same as I have it.
You don't append the url to the option element - you can if you wish - I will post a sample on how to do that below - but in my example it just uses the values from first and second choice as indexes into the data array.
Same JSON as in my sample above
HTML
You don't append the url to the option element - you can if you wish - I will post a sample on how to do that below - but in my example it just uses the values from first and second choice as indexes into the data array.
Same JSON as in my sample above
HTML
<select id="first-choice">
<option value="0">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>
<select id="second-choice"></select>
jQuery<script>
$(function() {
// GET JSON
$.getJSON('t2394.txt', function(data) {
// REGISTER CHANGE EVENT HANDLER ON first-choice
$('body').on('change', '#first-choice', function(i,e) {
// GET VALUE OF SELECTED (index into data array)
var idx = $(this).val();
// LOAD subOptions FROM data ARRAY USING index
var options = data[idx].subOptions;
// EMPTY second-choice READY FOR NEW <option>'s
$('#second-choice').empty();
// CREATE NEW OPTIONS WITH index IN subOptions AS VALUE
// HERE WE ADD THE url AS A data PROPERTY ON THE <option>
$.each(options, function(j,k) {
$('#second-choice').append(
$('<option/>', {value: j}).html(k.option).data({url : k.url})
)
});
});
// REGISTER CHANGE ON second-choice
$('body').on('change', '#second-choice', function(l,m) {
// ALERT THE REDIRECT CODE TO DEMONSTRATE IT WORKS
// WE RETRIEVE THE URL FROM THE DATA PROPERTY OF THE SELECTED
// <option> OF THIS <select>
alert('window.location=' + $('option:selected', this).data('url'));
});
});
});
</script>
Working sample here
Your JSON structure is not optimal for this - you probably want to create something like this
Open in new window
When you build your <option> list for the select - you attach the URL as a property to the option - so that when it is selected you can retrieve the URL and redirect.
It is not clear from your JSON and your description what you are trying to do - but it sounds hierarchical in which case you should structure your data to match the hierarchy. If you can provide some code to show how you are currently working we can take it from there.