Populate Select box from XML with jQuery - Cascading Select boxes

Question

I'm having a little trouble in getting this one figured out. I need to have two SELECT boxes, in which the first select box determines the content of the 2nd one, and if one of the selects in the 2nd one is chosen, will open a link in a new window (or new tab):

My XML is as follows:

<?xml version="1.0" encoding="utf-8"?>
<countries>
  <country label="Australia">
    <store link="http://Link1a.com">Retailer 1a</store>
    <store link="http://Link1b.com">Retailer 1b</store>
    <store link="http://Link1c.com">Retailer 1c</store>
    <store link="http://Link1d.com">Retailer 1d</store>
    <store link="http://Link2a.com">Retailer 2a</store>
    <store link="http://Link2b.com">Retailer 2b</store>
    <store link="http://Link2c.com">Retailer 2c</store>
    <store link="http://Link2d.com">Retailer 2d</store>
  </country>
  <country label="Argentina">
    <store link="http://Link3a.com">Retailer 3a</store>
    <store link="http://Link3b.com">Retailer 3b</store>
    <store link="http://Link3c.com">Retailer 3c</store>
    <store link="http://Link3d.com">Retailer 3d</store>
    <store link="http://Link4a.com">Retailer 4a</store>
    <store link="http://Link4b.com">Retailer 4b</store>
    <store link="http://Link4c.com">Retailer 4c</store>
    <store link="http://Link4d.com">Retailer 4d</store>
  </country>
</countries>

My script is as follows:

<script> 

$(document).ready(function() {
    var vendor_data; 
    $.get('links.xml', function(data) { 
        vendor_data = data; 
        var that = $('#countries'); 
        $('country', vendor_data).each(function() { 
            $('<option>').text($(this).attr('label')).appendTo(that);
        });
    }, 'xml');

    $('#countries').change(function() { 
        var val = $(this).val(); 
        var that = $('#store').empty(); 
        $('country', vendor_data).filter(function() { 
            return val == $(this).attr('label'); 
        }).find('store').each(function() {
            $('<option>').text($(this).text()).appendTo(that);  
        });
    });
});
</script>

HTML:

<form>
<select id="countries">
    <option value='0'>----------</option>
</select>
select id='store'>
    <option value='0'>----------</option>
</select>
</form>

Currently, I can populate the 2nd Select box with the data however, I don't know how to turn it into a "link" so that when selected, it'll open a new window with the link to the page I want visitors to go to.

Anyone can offer some help or advice?

Edit: meant to say, change the "link" in the XML to a "value" for the <option> tag eg. <option value="linkfromxml"> Retailer 2d </option>

And get the select box to open the link in a new window.

Answer 1

A select box can't display options with links, that would be invalid HTML. The browser wouldn't know what to do with the markup. If you're looking for this kind of behavior, you'll have to write Javascript to change the document.location based on user interaction with the select box.

Eg:

$('select').change(function (ev) {
    var val = $(this).val();
    document.location = '/?value=' + val;
});

Answer 2

Why not just add a change listener to the second select? Something like.

$('#store').change(function() { 
   document.location = $(this).val();
});

Update:

Demo here