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

            );
        }
    }
});

一切正常，但是今天早上我們發現了一些問題

• 它當前正在更新兩個參數，無論您更改其中一個還是兩個。 如果您更改模板（僅更改模板），並且僅更改語言，則需要更新。
• 如果未選擇任何內容，則需要將其替換為不帶有undefined的空白，因為它正在執行
• 如果我們更改模板，則還需要從URL將Registration.asp替換為PersonImport.asp。

這應該是這樣的

• div容器需要在其中包含默認URL
• 如果更改語言（lstLanguage），則應只更改DIV容器上的Language_Code。 然后，如果我選擇的語言選項沒有任何值（“通用默認值”），則Language_Code應該為空''
• 如果更改模板（lstTemplate），則應更改DIV容器上的角色。 還應將Registration.asp更改為PersonImport.asp。 然后，如果我選擇沒有值的模板選項（“通用默認值”），則“角色”應為空白”，並且PersonImport.asp應返回Registration.asp。

我不是一個很好的程序員，但是如果你們中的任何一個可以幫助我的話，那就太好了。

在此先感謝Federico

Answer 1

我創建了一個小提琴，對您的代碼進行了很多改進。 看一看。

工作演示