Javascript to update a div depending on selection from a dropdown?

I'm having a slight issue on one of our online system. We have a section where we give URLs for the user to give to their clients. The urls are 开发者_StackOverflowinside a couple of DIVs, and there is a dropdown with language selections that updates the URLs inside the DIVs according to the language selected. The problem is, that this is working only in IE at the moment. Probably some bad coded Javascript but I can't figure it out.

This is the Javascript function:

<script language="JavaScript">
function changedLanguage(langCode, divNames)
{
  var i;
  for (i in divNames)
    document.getElementById(divNames[i]).innerText = document.getElementById(divNames[i]).value.replace('Language_Code=','Language_Code='+langCod  e);
}
</script>

function changedTemplate(templateid, divNames)
{
var i;
for (i in divNames)
{
if (templateid == '') {
document.getElementById(divNames[i]).innerText = document.getElementById('f' +     divNames[i]).value;
} else {
document.getElementById(divNames[i]).innerText = document.getElementById('f' +  divNames[i]).value.replace('template_id=','Role='+templateid+'&Registration=Y').replace('Registration.asp','PersonImport.asp');
};
};
} 

This is the code on the dropdown:

<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>

This is the second dropdown

<select id="lstTemplate" name="lstTemplate">
<option value="">-- Generic default ---</option>
<option value="4">Member</option>
<option value="5">Student</option>
</select>

The IDs of the DIV containers are:

'Ind_URL','Ind_W_URL','Login_URL','Login_W_URL','Group_URL','Group_W_URL','Group_Login_URL','Group_Login_W_URL','Holding_Login_URL','Holding_Login_W_URL','Pre_URL','Pre_W_URL'

The first drop down needs to change the parameter on all DIVs, the second drop down needs to change the parameter on only the first two divs ('Ind_URL','Ind_W_URL').

I tried using the jQuery code provided below but works perfect with one drop down, as soon as I change the selection on the second drop down it clears some of the divs and doesn't change the parameter.

Any ideas?

innerText and outerText only work in IE. Please use innerHTML instead of innerText.

More info

Try using jQuery, it takes a lot of the cross-browser issues out of the equation. Something like this:

<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>

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

With JavaScript included like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
$(function(){
    $('#lstLanguage').bind('change', function(){

        langCode = $(this).find('option:selected').val();
        divIDs = [
            'Ind_URL',
            'Ind_W_URL',
            'Login_URL'
        ];


        for (i in divIDs) {
            currentDiv = $('#'+divIDs[i]);

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

            currentDiv.empty().append(divContents.replace('Language_Code=','Language_Code='+langCode));
        }
    });
});
</script>

Can play around with it here: http://jsfiddle.net/sDFHg/

Is that the sort of thing you were looking for?