Question

We have two dropdowns that according to your selection it changes part of the string in some div containers. The purpose of this is to return URLs to give to clients.

This is a sample of the code

<select name="lstLanguage" id="lstLanguage">
    <OPTION VALUE="">-- Generic default ---</OPTION>
    <OPTION ID="Arabic" VALUE="AR">Arabic</OPTION>
    <OPTION ID="German" VALUE="D">German</OPTION>
</select>

<select name="lstTemplate" id="lstTemplate">
    <OPTION VALUE="">-- Generic default ---</OPTION>
    <OPTION VALUE="1">Member</OPTION>
    <OPTION VALUE="2">NonMember</OPTION>
</select>

<div id='Ind_URL'>http://example.com/Registration.asp?Language_Code=?Role=</div>
<div id='Ind_W_URL'>http://example.com/Registration.asp?Language_Code=?Role=</div>
<div id='Login_URL'>http://example.com/?Language_Code=</div>

And this is the jQuery we currently have, which was provided by irama.

$(function(){
    divIDs = [
        'Ind_URL',
        'Ind_W_URL',
        'Login_URL',

    ];

    $('#lstTemplate').bind('change', function(){

        role = $(this).find('option:selected').val();
        updateURLDivs(langCode=null, role);

    });

    $('#lstLanguage').bind('change', function(){

        langCode = $(this).find('option:selected').val();
        updateURLDivs(langCode, role=null);

    });

    updateURLDivs = function (langCode, role) {
        for (i in divIDs) {
            currentDiv = $('#'+divIDs[i]);

            if (langCode !== null) {
                currentDiv.data('Language_Code', langCode);
            }
            if (role !== null) {
                currentDiv.data('role', role);
            }

            // Cache original div contents, so that the select menu can be changed more than once.
                if (typeof currentDiv.data('contents') == 'undefined') {
                    divContents = currentDiv .html();
                    currentDiv .data('contents', divContents);
                } else {
                    divContents = currentDiv .data('contents');
                }

            currentDiv.empty().append(
                divContents
                    .replace('role=','role='+currentDiv.data('role'))
                    .replace('Language_Code=','Language_Code='+currentDiv.data('Language_Code'))

            );
        }
    }
});

This is working fine, but this morning we found a few issues

• It is currently updating both parameters, no matter if you change one or both. We need it to update if you change the template, just the template and if you change the language just the language.
• If nothing is selected we need it to replace it with a blank not with undefined as it is currently doing
• If we change the Template it also needs to replace Registration.asp to PersonImport.asp from the URLs

This is how it should work

• The div containers need to have the default URLs in them
• If I change the language (lstLanguage) it should just change the Language_Code on the DIV containers. Then if I select the language option with no value (“Generic default”) the Language_Code should be blank ”
• If I change the template (lstTemplate) it should change the Role on the DIV containers. Also should change Registration.asp to PersonImport.asp. Then if I select the template option with no value (“Generic Default) the Role should be blank ” and PersonImport.asp should go back to Registration.asp.

I’m not a good coder on this, but it would be great if any of you can give me a hand with this.

Thanks in advance
Federico

Answer 1

I have create a fiddle with a lot of improvement in your code. Take a look.

Working demo