1

对于我正在开发的 web 应用程序，我需要使用根据下拉选择菜单更改的数据填充表列。我在下面有一个解决方案，效果很好，但是因为我今天早上才真正开始学习 javascript/JQuery，所以我确信它不是一个很好的解决方案。当我开始使用较大的表格或大量下拉字段时，它会变得一团糟。有什么办法可以做得更好吗？

谢谢，

标记

var GBP = new Array();
GBP[0] = "£1";
GBP[1] = "£2";
GBP[2] = "£3";
GBP[3] = "£4";
GBP[4] = "£5";
GBP[5] = "£6";
GBP[6] = "£7";

var EUR = new Array();
EUR[0] = "€1";
EUR[1] = "€2";
EUR[2] = "€3";
EUR[3] = "€4";
EUR[4] = "€5";
EUR[5] = "€6";
EUR[6] = "€7";

var USD = new Array();
USD[0] = "$1";
USD[1] = "$2";
USD[2] = "$3";
USD[3] = "$4";
USD[4] = "$5";
USD[5] = "$6";
USD[6] = "$7";

$(document).ready(function() {

    //populate currency column with default values (GBP)
    $('#prices tr').each(function(i) {
            $(this).find('.currency').html(GBP[i]);
    });

    //populate the currency column with a value dependent
    //on the selector dropdown 
    $('.currency-select').change(function() {
        if($(this).val() == "GBP"){
            $('#prices tr').each(function(i) {
                $(this).find('.currency').html(GBP[i]);
            }); 
        }

        if($(this).val() == "EUR"){
            $('#prices tr').each(function(i) {
                $(this).find('.currency').html(EUR[i]);
            });
        }

        if($(this).val() == "USD"){
            $('#prices tr').each(function(i) {
                $(this).find('.currency').html(USD[i]);
            });
        }       
    });
});
4

1 回答 1

4

你可以使用一个对象。由于值以 递增1，因此您可以使用index所选元素的 动态生成值，html像大多数 jQuery 对象的方法一样接受回调函数。

回调的第一个参数是indexjQuery 集合中的选定元素（选定元素）。函数的返回值将被设置为元素的新 html 内容。

var cur = {
   GBP: '£',
   EUR: '€',
   USD: '$'
}

$(document).ready(function() {
    $('.currency-select').change(function() {
        // Getting symbol based on the current value
        var c = cur[this.value];
        $('#prices tr').find('.currency').html(function(i) {
            return c + (i+1); 
        }); 
    }).change(); // trigger the change event once on DOM ready
});

编辑：如果值不增加1：

var cur = {
   GBP: '£',
   EUR: '€',
   USD: '$',
   values: ['3', '4', '0', '9', '...']
}

$('#prices tr').find('.currency').html(function(i) {
    return c + cur.values[i]; 
});

jsFiddle.net 上的演示

于 2013-05-25T22:12:19.887 回答