How can I change drop down box #2 based on input from drop down box #1?

Question

I have two drop down menus.

    <         


        

Answer 1

JS Fiddle

Markup

<select id="asset_id" name="asset[asset_id]" onchange="selectCountry()">

Javascript

function selectCountry()
{
   var asset = document.getElementById('asset_id');
   var assetText = asset.options[asset.selectedIndex].text;



    var country_id = document.getElementById('country_id');

    if(assetText.toLowerCase().indexOf('spanish') > -1)
       country_id.value = 12;  //spain
    else if(assetText.toLowerCase().indexOf('german') > -1)
       country_id.value = 14;  //germany
    else if(assetText.toLowerCase().indexOf('english') > -1)
       country_id.value = 11;  //england
    else if(assetText.toLowerCase().indexOf('french') > -1)
       country_id.value = 13;  //france
}​

Answer 2

Having a second dropdown doesn't make a lot of sense then if they're related that way, unless the user can select a combination of trailers and countries that don't match. Why not make your first control a dropdown, add a data-* attribute to the options and fill a label for the user.

So, your options would look something like this:

<option id="optT1Span" value="1" data-country="Spain">Trailer 1 - Spanish</option>

If you need the values from the second option, you can just set up a global array lookup of those country/value combinations.

Obviously, I don't know the thoughts behind your design or what you have planned, but if the selections must match, then I don't see the point of giving the ability to select a country. It almost makes more sense to filter by your country and then hide/show options based on that selection more than what you have planned. I feel you always remove as many avenues of user interaction as you can if they aren't necessary.

Answer 3

Assuming your dropdowns are dynamically built, I'd have your server generate a little javascript for you - the PHP code can map them, so the output looks something like:

var _languageMap = {
    { 1: 12 },
    { 2: 11 },
    ...
    { 8: 14 }
};

Then set an eventhandler on change of your first dropdown, and set the second by looking up the value from your language map. If you're using jQuery, try something like:

jQuery("#asset_id").change(function() {
    var trailerId = jQuery(this).val();
    var languageId = _languageMap[trailerId];
    jQuery("#country_id").val(languageId);
});

If you're not using jQuery, you can do the same with regular javascript - you'll just need to look up event handlers for dropdown lists - I just don't remember how to do that the old-fashioned way.

Answer 4

This should do what you need (Also handles the other languages):

HTML

<select id="asset_id" name="asset[asset_id]">
    <option value=""> - Select Trailer - </option>
    <option value="1">Trailer 1 - Spanish</option>
    <option value="2">Trailer 1 - English</option>
    <option value="3">Trailer 1 - French</option>
    <option value="4">Trailer 1 - German</option>
    <option value="5">Trailer 2 - Spanish</option>
    <option value="6">Trailer 2 - English</option>
    <option value="7">Trailer 2 - French</option>
    <option value="8">Trailer 2 - German</option>
</select>
<br />
<select id="country_id" name="material[country_id]">
    <option value=""> - Select Country - </option>
    <option value="11">England</option>
    <option value="12">Spain</option>
    <option value="13">France</option>
    <option value="14">Germany</option>
</select>

JavaScript

var ddl1 = document.getElementById( 'asset_id' );

function updateCountry ( e ) {

    var asset = this.options[ this.selectedIndex ].value,
        countryDDL= document.getElementById( 'country_id' ),
        country, i = countryDDL.options.length - 1;

    switch ( asset ) {
        case "1":
            country = 12;
            break;
        case "2":
            country = 11;
            break;
        case "3":
            country = 13;
            break;
        case "4":
            country = 14;
            break;
        case "5":
            country = 12;
            break;
        case "6":
            country = 11;
            break;
        case "7":
            country = 13;
            break;
        case "8":
            country = 14;
            break;
    }

    for ( ; i > -1 ; i-- ) {

        if ( countryDDL.options[i].value == country ) {
            countryDDL.options[i].selected = true;
            break;
        }

    }

}

ddl1.onchange = updateCountry;

Fiddle: http://jsfiddle.net/kboucher/uVMZF/