在循环中使用.append(）在<选择>基于所选择的选项

Using .append() in a loop to add text from an object after a <select> based on the selected option

本文关键字：选择 gt 于所 选项 循环 append lt      更新时间：2023-09-26

我想在根据选择的选项选择了一个选项后，在下拉菜单下插入一个文本平静。我写的代码会完全按照我的意愿去做。但似乎应该有一种更快、更优雅的方式来处理我要做的事情。我在想循环，但循环让我有点困惑，我不确定我写的函数做错了什么。

这是我的原始工作代码：

$('#Total_Package_Pool_Size').change(function() {               
    $('#PS_Dyn_warn').empty();
    $('#PS_Dyn_warn').append("This is the exact size of the pool, this is not an up to size.")
    var PS_Warning_Obj = {
        one : " A pool 14 x 28 is track space 14 and track length 29",
        two : " A pool 16 x 32 is track space 16 and track length 33",
        three: " A pool 18 x 34 is track space 18 and track length 35",
        four : " A pool 20 x 40 is track space 20 and track lenght 41"
    };
    var PS_Warning = document.getElementById('PS_Dyn_warn');
    var sizeDD = document.getElementById('Total_Package_Pool_Size');
    var sizeOpt = sizeDD.options[sizeDD.selectedIndex].text;
    switch (sizeOpt) {
        case "14 x 28":
            $('#PS_Dyn_warn').show();
            $("#PS_Dyn_warn").append(PS_Warning_Obj.one);
         break;
        case "16 x 32":
            $('#PS_Dyn_warn').show();
            $("#PS_Dyn_warn").append(PS_Warning_Obj.two);
         break;
        case "18 x 36":
            $('#PS_Dyn_warn').show();
            $("#PS_Dyn_warn").append(PS_Warning_Obj.three);
         break;
        case "20 x 40":
            $('#PS_Dyn_warn').show();
            $("#PS_Dyn_warn").append(PS_Warning_Obj.four);
         break;
    }   
});

这是我试图写的循环：

    var PS_Warning_Obj = {};
    PS_Warning_Obj['14x28'] = [" A pool 14 x 28 is track space 14 and track length 29"];
    PS_Warning_Obj['16x32'] = [" A pool 16 x 32 is track space 16 and track length 33"];
    PS_Warning_Obj['18x36'] = [" A pool 18 x 34 is track space 18 and track length 35"];
    PS_Warning_Obj['20x40'] = [" A pool 20 x 40 is track space 20 and track lenght 41"];
function Dynamic_PS_Warning() {
        $('#PS_Dyn_warn').empty();
        $('#PS_Dyn_warn').append("This is the exact size of the pool, this is not an up to size.")
        var sizeDD = document.getElementById('Total_Package_Pool_Size');
        var sizeOpt = sizeDD.options[sizeDD.selectedIndex].text;
        var PS_Warning = document.getElementById('PS_Dyn_warn');
        var psArray = PS_Warning_Obj[sizeOpt];
        if (psArray) {
            for (var i = 0; i < psArray.length; i++) {
                for (x in PS_Warning_Obj) {
                    if (psArray === sizeOpt) {
                        PS_Warning.append(PS_Warning_Obj[x];
                    }
                }
            }
        }
    }

类似的东西更动态，只需将数字插入字符串

$('#Total_Package_Pool_Size').change(function () {
    var sizeOpt = $('#Total_Package_Pool_Size option:selected').text(),
        arr     = sizeOpt.split('x').map(function(x) {
            return +$.trim(x);
        }),
        text1   = "This is the exact size of the pool, this is not an up to size.",
        text2   =  "A pool " + sizeOpt + " is track space " + arr[0] + " and track length " + (arr[1] + 1)
    $('#PS_Dyn_warn').text(text1 + text2).show();
});

FIDDLE

您可以通过删除消息的硬编码并使其动态化，使其更加灵活。此外，您还将jQuery与香草JavaScript混合在一起。你没有充分利用jQuery。

$('#Total_Package_Pool_Size').change(function() {
    var dimensions = $(this).val().split('x');
    var space = parseInt(dimensions[0]);
    var length = parseInt(dimensions[1]);
    var message = 'This is the exact size of the pool, this is not an up to size.';
    message += ' A pool ' + space + ' x ' + length + ' is track space ' + space + ' and track length ' + (length + 1);
    $('#PS_Dyn_warn')
        .show()
        .text(message);
});

这使用了select选项的值，而不是文本，这要好得多。您的HTML应该如下所示：

<select id="Total_Package_Pool_Size">
    <option value="14x28">14 x 28</option>
    <option value="16x32">16 x 32</option>
    <option value="18x36">18 x 36</option>
    <option value="20x40">20 x 40</option>
</select>

Fiddle

相关文章：