javascript - Javascript:在数组/对象中查找值以确定表单显示

让我来设置情况：

我有一个表格。这种形式有几个取决于单个下拉列表的字段，我们称其为Art Kind。基于此Art Kind的值，其他几个字段将被隐藏/显示。此Art Kind下拉列表中的多个值可以触发所显示的同一组字段。例如。

User selects "Awesome", or "Cool", from the Art Kind dropdown:
     - URL and Name fields are shown

User selects "Rainbow", or "Double Rainbow", from the Art Kind dropdown:
    - URL and Name fields are hidden
    - Color and Size fields are shown

我想你应该已经明白了。

我正在尝试提供一个比这样的更好的解决方案：

if (selected == "Awesome" || selected == "Cool")
{
    url.show();
    name.show();
}

因为存在大量字段，并且根据选择需要显示/隐藏大量不同的选项。我涉足阵列，但是我迷失在如何完成我需要的东西上。

我正在考虑将选项存储在多维数组或对象中，例如：

var values = [
     ['Awesome', 'Cool'], ['url', 'name']
]

但是我不确定如何实现这样的事情。

有任何想法吗？我愿意回答涉及jQuery的简化问题，但我宁愿不要使用其他库。

最佳答案

与@Pointy类似的想法，执行方式略有不同。

function hideAllFormElements()
{
    // snip...
}

function showElements(ids)
{
    for (var i=0; i<ids.length; i++)
    {
        document.getElementById(ids[i]).style.display = 'none';
    }
}

var mapping = {
    Awesome: ['url', 'name'],
    Cool: ['url', 'name'],
    Rainbow: ['color', 'size'],
    'Double Rainbow': ['color', 'size']
};

// later...
hideAllFormElements();
showElements(mapping[selected]);

编辑

因为jQuery是蜜蜂的膝盖，所以不用单独的隐藏/显示功能就足够了，只要上面给出var mapping = {...}即可：

$('#mySelect').change(function ()
{
    var selected = $(this).val();

    $('#myForm :input').hide();
    $.each(mapping[selected], function ()
    {
        $('#' + this).show();
    });

    // or if you want to get really fancy,
    $($.map(mapping[selected], function ()
    {
        return '#' + this;
    }).get().join(', ')).show();
});

关于javascript - Javascript:在数组/对象中查找值以确定表单显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6472978/