Javascript для обновления div в зависимости от выбора из выпадающего? - PullRequest
Новая
       1

Javascript для обновления div в зависимости от выбора из выпадающего?

0 голосов
/ 10 августа 2011

У меня небольшая проблема с одной из наших онлайн-систем. У нас есть раздел, где мы даем URL-адреса для пользователей, чтобы дать своим клиентам. URL-адреса находятся внутри пары DIV, и есть раскрывающийся список с выбором языка, который обновляет URL-адреса внутри DIV в соответствии с выбранным языком. Проблема в том, что на данный момент это работает только в 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

'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 и не изменяет параметр.

Есть идеи?

Заранее спасибо

Federico

Ответы [ 2 ]

1 голос
/ 10 августа 2011

innerText и outerText работают только в IE.Пожалуйста, используйте innerHTML вместо innerText.

Подробнее

0 голосов
/ 10 августа 2011

Попробуйте использовать 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/

Это что-то вродеВы искали?

...