Cascading dropdown on Javascript

Question

The cascading drop down works fine on the first one, does not recognize the second one. Missing something small here. I've tried a few options but the javascript does not attach to the second call. Is there a way to dynamically add it?

<label class="page1">Country</label>
<div class="tooltips" title="Please select the country that the customer will primarily be served from">
    <select id="country" name="country" placeholder="Phantasyland">
        <option></option>
        <option>Germany</option>
        <option>Spain</option>
        <option>Hungary</option>
        <option>USA</option>
        <option>Mexico</option>
        <option>South Africa</option>
        <option>China</option>
        <option>Russia</option>
    </select>
</div>

<br />
<br />

<label class="page1">Location</label>
<div class="tooltips" title="Please select the city that the customer is     primarily to be served from.">
    <select id="location" name="location" placeholder="Anycity"></select>
</div>

<label class="page1">Country</label>
<div class="tooltips" title="Please select the country that the customer will primarily be served from">
    <select id="country" name="country" placeholder="Phantasyland">
        <option></option>
        <option>Germany</option>
        <option>Spain</option>
        <option>Hungary</option>
        <option>USA</option>
        <option>Mexico</option>
        <option>South Africa</option>
        <option>China</option>
        <option>Russia</option>
    </select>
</div>

<br />
<br />

<label class="page1">Location</label>
<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
    <select id="location" name="location" placeholder="Anycity"></select>
</div>

Javascript:

jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn) {
            return '<option value="' + lcn + '">' + lcn + '</option>'
        }).join('');

        $locations.html(html)
    });
});

Answer 1

The problem is that you are using duplicate ID's on HTML elements. It is invalid to have the same ID on more than one element in an HTML document. You will also need to change the name attributes or else your form will only contain the values for the last elements.

You can add a class to your top level category select elements

<select id="country1" class="country" name="country1" placeholder="Phantasyland">
 ...
</select>

<select id="country2" class="country" name="country2" placeholder="Phantasyland">
 ...
</select>

You can then add a property to your sub categories that links to the parent select element

<select data-parent="country1" name="location1" placeholder="Anycity"></select>
<select data-parent="country2" name="location2" placeholder="Anycity"></select>

Then bind the handler to the country class

$('.country').change(function () {
    var id = $(this).attr('id');
    var $locations = $('[data-parent=' + id + ']');

    var country = $(this).val(), lcns = locations[country] || [];

    var html = $.map(lcns, function(lcn) {
        return '<option value="' + lcn + '">' + lcn + '</option>'
    }).join('');

    $locations.html(html)
});