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

Question

У нас есть два выпадающих списка, которые по вашему выбору изменяют часть строки в некоторых контейнерах div. Цель этого - вернуть URL-адреса для предоставления клиентам.

Это образец кода

<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 name="lstTemplate" id="lstTemplate">
    <OPTION VALUE="">-- Generic default ---</OPTION>
    <OPTION VALUE="1">Member</OPTION>
    <OPTION VALUE="2">NonMember</OPTION>
</select>

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

И это тот самый jQuery, который был предоставлен irama.

$(function(){
    divIDs = [
        'Ind_URL',
        'Ind_W_URL',
        'Login_URL',

    ];

    $('#lstTemplate').bind('change', function(){

        role = $(this).find('option:selected').val();
        updateURLDivs(langCode=null, role);

    });

    $('#lstLanguage').bind('change', function(){

        langCode = $(this).find('option:selected').val();
        updateURLDivs(langCode, role=null);

    });

    updateURLDivs = function (langCode, role) {
        for (i in divIDs) {
            currentDiv = $('#'+divIDs[i]);

            if (langCode !== null) {
                currentDiv.data('Language_Code', langCode);
            }
            if (role !== null) {
                currentDiv.data('role', role);
            }

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

            currentDiv.empty().append(
                divContents
                    .replace('role=','role='+currentDiv.data('role'))
                    .replace('Language_Code=','Language_Code='+currentDiv.data('Language_Code'))

            );
        }
    }
});

Это работает нормально, но сегодня утром мы обнаружили несколько проблем

• В настоящее время обновляются оба параметра, независимо от того, измените ли вы один или оба. Мы нуждаемся в обновлении, если вы меняете шаблон, просто шаблон, а если вы меняете язык - только язык.
• Если ничего не выбрано, нам нужно заменить его пробелом, а не неопределенным, как в настоящее время
• Если мы изменим шаблон, ему также придется заменить Registration.asp на PersonImport.asp из URL

Вот как это должно работать

• В контейнерах div должны быть URL-адреса по умолчанию
• Если я меняю язык (lstLanguage), он должен просто изменить Language_Code в контейнерах DIV. Затем, если я выберу опцию языка без значения («Универсальный по умолчанию»), Language_Code должен быть пустым ''
• Если я изменю шаблон (lstTemplate), он должен изменить роль в контейнерах DIV. Также следует изменить Registration.asp на PersonImport.asp. Затем, если я выберу параметр шаблона без значения («Универсальное значение по умолчанию»), роль должна быть пустой »и PersonImport.asp должен вернуться к Registration.asp.

Я не очень хороший кодер, но было бы здорово, если бы кто-нибудь из вас смог мне помочь с этим.

Заранее спасибо Федерико

Answer 1

Я создал скрипку с большим количеством улучшений в вашем коде. Посмотри.

Рабочая демо