JSFiddle - React, Tailwind, and code Playground

by makypl

HTML

<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'></div>
<div id='Ind_W_URL'></div>
<div id='Login_URL'></div>

JavaScript

$(function(){
   
    divIDs = [
        {id: 'Ind_URL', url: 'http://example.com/$pagename.asp?Language_Code=$lang?Role=$role'},
        {id:'Ind_W_URL', url: 'http://example.com/$pagename.asp?Language_Code=$lang?Role=$role'},
         {id:'Login_URL', url: 'http://example.com/?Language_Code=$lang'}
    ];

    $('#lstTemplate').bind('change', function(){
        updateURLDivs('', $(this).val(), 'PersonImport');

    });

    $('#lstLanguage').bind('change', function(){
        updateURLDivs($(this).val(), '', 'Registration');
    });

    updateURLDivs = function (langCode, role, pagename) {
        langCode = langCode || $('#lstLanguage').val();
        role = role || $('#lstTemplate').val();
        
           $.each(divIDs, function(){
        
               if(langCode && role){ 
              $("#"+this.id).html(this.url.replace('$lang', langCode).replace('$role',role).replace('$pagename', pagename));
               }
               else{
                   $("#"+this.id).html('');
               }
            });
        
    }; 
});