使用jQuery搜索XML中的多个节点

Question

I've been making tons of progress on my vehicle fit guide. I've made a drop down box dynamically populate based on previous selections, and now I need those selections to search the xml file and return my results. My old code only searched by the vehicle year, and that returned all vehicles with the same year. I'm trying to parse my XML using multiple variables, and now can't get any results to return. how am I able to search for models, then search for years within the model? here are my code snippets below.

<script type="text/javascript">
jQuery(document).ready(function($){

var $xml;

var make = $('#make');
var model = $('#model');
var year = $('#year');
var front1 = $('#Front_Location_1');
var frontsize1 = $('#Front_Size_1');
$.get('fitguide3.xml', function(data){
    $xml = $(data);
    var rows = $(data).find('ROWSET 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('ROWSET 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('ROWSET 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 _front1 = $xml.find('ROWSET ROW:contains("'+finalmodel+','+_value3+'")');
    var front = [];  
    console.log(_front1);

    $.each(_front1, function(index, element){

        var _front = $('#frontspeakers').val();
        front.push('<p>' + element + '</p>');
        front = $.unique(front);
        front1.append(element);
    });


})

});


</script>

And here is the XML that I want to search by Model AND year:

<ROWSET>
<ROW>
<MAKE>ACURA</MAKE>
<Model>CL</Model>
<YEAR>2001-2003</YEAR>
<Front_Location_1>Door</Front_Location_1>
<Front_Size_1>6 1/2</Front_Size_1>
<Front_Location_2>Sail Panel</Front_Location_2>
<Front_Size_2>1    </Front_Size_2>
<Rear_Location_1>Deck</Rear_Location_1>
<Rear_Size_1>6 x 9</Rear_Size_1>
<Rear_Location_2></Rear_Location_2>
<Rear_Size_2></Rear_Size_2>
<Other_Speakers></Other_Speakers>
</ROW>
</ROWSET>

This searches for them, but gets no results. Work-in-progress version located HERE

Answer 1

Being that this is the first script I've ever tried to write, it probably seems very simple to the rest of you, but, 200+ searches later, I figured it out all on my own!

    $('#year').on('click', function(){  
    var _value3 = $(this).val();
    var finalmodel = $('#model').val();
    var finalfilter = $xml.find('ROWSET ROW:contains("'+finalmodel+'")');
    var _front1 = finalfilter.filter('ROWSET 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);
    });