[英]Javascript to update a div depending on selection from a dropdown?
我在我们的一个在线系统上遇到了一个小问题。 我们有一个部分,我们为用户提供 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 并且不会更改参数。
有任何想法吗?
innerText 和outerText 仅适用于IE。 请使用innerHTML 而不是innerText。
尝试使用 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/
那是你要找的那种东西吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.