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

            );
        }
    }
});

这很好，但今天早上我们发现了一些问题

目前正在更新这两个参数，无论您是更改其中一个还是两个。如果您更改模板，只需更改模板，并且只更改语言，我们就需要更新。
如果没有选择任何内容，我们需要将其替换为空白而不是当前正在进行的未定义
如果我们更改模板，还需要将URL.adp中的Registration.asp替换为PersonImport.asp

这是它应该如何运作

div容器需要包含默认网址
如果我更改语言（lstLanguage），它应该只更改DIV容器上的Language_Code。然后，如果我选择没有值的语言选项（“通用默认值”），则Language_Code应为空白''
如果我更改模板（lstTemplate），它应该更改DIV容器上的角色。还应该将Registration.asp更改为PersonImport.asp。然后，如果我选择没有值的模板选项（“Generic Default”），则Role应为空白''，PersonImport.asp应返回Registration.asp。

我不是一个好的程序员，但如果你们中的任何一个人能帮我一把，那就太好了。

提前致谢费德里科

Answer 1

我创建了一个在代码中有很多改进的小提琴。看一看。

正在使用 demo

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

1 个答案: