Javascript 根據下拉列表中的選擇更新 div？

Question

我在我們的一個在線系統上遇到了一個小問題。 我們有一個部分，我們為用戶提供 URL 以提供給他們的客戶。 url 位於幾個 DIV 中，並且有一個包含語言選擇的下拉菜單，可根據所選語言更新 DIV 中的 URL。 問題是，目前這僅在 IE 中有效。 可能是一些編碼錯誤的 Javascript 但我無法弄清楚。

這是 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');
};
};
} 

這是下拉菜單上的代碼：

<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 id="lstTemplate" name="lstTemplate">
<option value="">-- Generic default ---</option>
<option value="4">Member</option>
<option value="5">Student</option>
</select>

DIV 容器的 ID 為：

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

第一個下拉菜單需要更改所有 DIV 的參數，第二個下拉菜單只需要更改前兩個 div 的參數（'Ind_URL'、'Ind_W_URL'）。

我嘗試使用下面提供的 jQuery 代碼，但可以完美地使用一個下拉菜單，只要我更改第二個下拉菜單上的選擇，它就會清除一些 div 並且不會更改參數。

有任何想法嗎？

Answer 1

innerText 和outerText 僅適用於IE。 請使用innerHTML 而不是innerText。

更多信息

Answer 2

嘗試使用 jQuery，它可以解決很多跨瀏覽器問題。 像這樣的東西：

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

JavaScript 包括這樣的：

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

可以在這里玩： http://jsfiddle.net/sDFHg/

那是你要找的那種東西嗎？