Javascript 根据下拉列表中的选择更新 div？

Question

我的一个在线系统出现了一个小问题。 我们有一个部分提供 URL，供用户提供给他们的客户。这些 URL 位于几个 DIV 内，并且有一个包含语言选择的下拉列表，可根据所选语言更新 DIV 内的 URL。问题是，目前这仅在 IE 中有效。可能是一些糟糕的 JavaScript 代码，但我无法弄清楚。

这是 Javascript 函数：

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

第一滴down 需要更改所有参数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/< /a>

这是您正在寻找的东西吗？