I am trying to make a dynamic drop-down menu that, when completed, takes you to the page listed with it in the XML. Right now I have it to where it spits out all the information but I keep breaking it when trying to get it to go to the url.
Demo page: http://creativenights.creativecaraudio.net/cn/psfit/psfit.html
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="psfit.js"></script> <table style="width: 100%;" border="0" align="center"> <tbody> <tr> <td style="width: 15%;"> </td> <td style="width: 70%; text-align: center;"> <select id="make"> <option value="0">---Select Make---</option> </select> <select id="model" name="model"> <option value="0">---Select Model---</option> </select> <select id="year"> <option value="0">---Select Year---</option> </select> </td> <td style="width: 15%;"> </td> </tr> <tr> <td style="width: 15%;"> </td> <td id="Front_Location_1" style="width: 70%; text-align: center;"> </td> <td style="width: 15%;"> </td> </tr> </tbody>Jquery:
jQuery(document).ready(function ($) {
var $xml;
var make = $('#make');
var model = $('#model');
var year = $('#year');
var front1 = $('#Front_Location_1');
var URL = $('#URL');
$.get('psfit.xml', function (data) {
$xml = $(data);
var rows = $(data).find('root row');
var makes = [];
$.each(rows, function (index, element) {
var _make = $(element).find('MAKE').text();
makes.push('<option value="' + _make + '">' + _make + '</option>');
});
makes = $.unique(makes);
make.append(makes.join('\n'));
}, 'xml');
$('#make').on('change', function () {
var _value1 = $(this).val();
var _models = $xml.find('root row:contains("' + _value1 + '")');
var models = [];
console.log(_models);
$.each(_models, function (index, element) {
var _model = $(element).find('Model').text();
models.push('<option value="' + _model + '">' + _model + '</option>');
});
models = $.unique(models);
model.find('option').remove();
model.append(models.join('\n'));
});
$('#model').on('change', function () {
var _value2 = $(this).val();
var _years = $xml.find('root row:contains("' + _value2 + '")');
var years = [];
console.log(_years);
$.each(_years, function (index, element) {
var _year = $(element).find('YEAR').text();
years.push('<option value="' + _year + '">' + _year + '</option>');
});
years = $.unique(years);
year.find('option').remove();
year.append(years.join('\n'));
});
// $('#make').val()
// $('#model').val()
// $('#year').val()
$('#year').on('click', function () {
var _value3 = $(this).val();
var finalmodel = $('#model').val();
var finalfilter = $xml.find('root row:contains("' + finalmodel + '")');
var _front1 = finalfilter.filter('root row:contains("' + _value3 + '")');
console.log(_front1);
$.each(_front1, function (index, element) {
var _front = $('#frontspeakers').val();
var front = [];
front.push('<p>' + element + '</p>');
front = $.unique(front);
front1.html(element);
});
})
});
XML:
<?xml version="1.0" encoding="UTF-8"?>
<root>
<row>
<MAKE>Polaris</MAKE>
<Model>RZR</Model>
<YEAR>2014+</YEAR>
<URL>http://creativeaudio.net/marine-powersports/powersports/vehicle-specific-solutions/polaris-rzr-2014-full-system-jl-audio-stealthbox-mx-amps-wetsounds-sound-bar-bluetooth-receiver-wires/</URL>
</row>
<row>
<MAKE>Polaris</MAKE>
<Model>RZR XP4</Model>
<YEAR>2011-2013</YEAR>
<URL>http://creativeaudio.net/marine-powersports/powersports/vehicle-specific-solutions/polaris-rzr-2011-2013-full-system-jl-audio-stealthbox-mx-amps-wetsounds-sound-bar-bluetooth-receiver-wires/</URL>
</row>
<row>
<MAKE>Polaris</MAKE>
<Model>Ranger XP</Model>
<YEAR>2009-2012</YEAR>
<URL>http://creativeaudio.net/marine-powersports/powersports/vehicle-specific-solutions/polaris-ranger-xp-09-12-full-system-jl-audio-stealthbox-mx-amp-wetsounds-sound-bar-bluetooth-receiver-wires/</URL>
</row>
<row>
<MAKE>Polaris</MAKE>
<Model>ACE</Model>
<YEAR>2015+</YEAR>
<URL>http://creativeaudio.net/marine-powersports/powersports/vehicle-specific-solutions/polaris-ace-2015-full-system-jl-audio-stealthbox-mx-amps-wetsounds-sound-bar-bluetooth-receiver-wires/</URL>
</row>
<row>
<MAKE>Yamaha</MAKE>
<Model>Wolverine</Model>
<YEAR>2015+</YEAR>
<URL>http://creativeaudio.net/marine-powersports/powersports/vehicle-specific-solutions/yamaha-wolverine-2015-full-system-jl-audio-stealthbox-mx-amps-wetsounds-sound-bar-bluetooth-receiver-wires/</URL>
</row>
<row>
<MAKE>Kawasaki</MAKE>
<Model>Teryx</Model>
<YEAR>2012+</YEAR>
<URL>http://creativeaudio.net/marine-powersports/powersports/vehicle-specific-solutions/kawasaki-teryx-2015-full-system-jl-audio-stealthbox-mx-amps-wetsounds-sound-bar-bluetooth-receiver-wires/</URL>
</row>
<row>
<MAKE>Honda</MAKE>
<Model>Pioneer</Model>
<YEAR>2014+</YEAR>
<URL>http://creativeaudio.net/marine-powersports/powersports/vehicle-specific-solutions/honda-pioneer-2015-full-system-jl-audio-stealthbox-mx-amps-wetsounds-sound-bar-bluetooth-receiver-wires/</URL>
</row>
<row>
<MAKE>Can-Am</MAKE>
<Model>Commander</Model>
<YEAR>2011+</YEAR>
<URL>http://creativeaudio.net/marine-powersports/powersports/vehicle-specific-solutions/can-am-commander-maverick-full-system-jl-audio-stealthbox-mx-amps-wetsounds-sound-bar-bluetooth-receiver-wires/</URL>
</row>
<row>
<MAKE>Can-Am</MAKE>
<Model>Maverick</Model>
<YEAR>2013+</YEAR>
<URL>http://creativeaudio.net/marine-powersports/powersports/vehicle-specific-solutions/can-am-commander-maverick-full-system-jl-audio-stealthbox-mx-amps-wetsounds-sound-bar-bluetooth-receiver-wires/</URL>
</row>
</root>
I know I need to use window.location.replace("http://www.google.com");, but I am unsure how to implement it and only grab the URL.
Any help is greatly appreciated.