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

让我来说明一下情况：

我有一张表格。此表单有多个字段，这些字段依赖于一个下拉列表，我们称之为艺术类。基于这种艺术的价值，其他几个领域将被隐藏/显示。此艺术类下拉列表中的多个值可以触发显示的同一组字段。比如说

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

我想你明白了

我正试图想出一个比这更好的解决方案：

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

因为有大量字段和大量不同的选项需要根据选择显示/隐藏。我涉猎过一个数组，但我不知道如何实现我需要的

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

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

但我不知道如何实施这样的事情

---

有什么想法吗？为了简化起见，我愿意接受涉及jQuery的答案，但我宁愿将其他库排除在外。

最好使用对象，将值作为键。至于价值观，如果不知道更多细节，很难说

如果只有几个不同的整体页面设置（即显示和隐藏的内容的组合），则可能最容易将这些内容封装在几个函数中，并使映射从所选值转到各个函数：

function rainbowMode() {
  // show color and size, hide url and name ...
}

function awesomeMode() {
  // show url and name, hide color and size ...
}

var actionMap = {
  'Rainbow': rainbowMode,
  'DoubleRainbow': rainbowMode,
  'Awesome': awesomeMode,
  // ...
};

另一种完全不同的方法是将选择绑定到表单容器的一个或多个CSS类的添加/删除，并结合CSS规则来隐藏/显示表单的部分。唯一的问题是，你不能仅仅通过CSS来禁用表单字段，所以如果你需要表单帖子不包含不合适的字段，那就没有什么帮助了

---

我一直在考虑编写一个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]);

---

我就是通过使用'rel'标记来实现这一点的，它在HTML中大部分是未使用的。请注意，我的示例使用jQuery，但可以轻松地适应任何其他JS框架或纯Javascript

<select id="artkind">
    <option value="cool">Cool</option>
    <option value="awesome">Awesome</option>
    <option value="rainbow">Rainbow</option>
    <option value="2xrainbow">Double Rainbow</option>
</select>

<input name="url" rel="cool awesome">
<input name="name" rel="cool awesome">
<input name="color" rel="rainbow 2xrainbow">
<input name="size" rel="rainbow 2xrainbow">

<script>
    $('#artkind').change(function() {
        $('input').hide(); // To hide everything
        $('[rel*="'+this.value+'"]').show(); // To show only desired fields
    })
</script>

---

注意，我还没有实际测试这段代码，所以我不能保证它能正常工作。但是我以前使用过这种精确的方法来处理你所说的事情。

看看knockoutjs。您可以创建一个视图模型，然后让相关的观察对象负责显示内容的所有逻辑。它可能无法摆脱一些痛苦，但可能是你正在寻找的可能的复制品：我以前玩过击倒，但我不想引入另一个库。实际上，我正在将其集成到一个ExtJS项目中，所以请不要再添加库了！如果ExtJS中有什么我不知道的功能，请告诉我！正当但这难道不需要我手动隐藏rainbowMode和awesomemode函数中之前显示的所有元素吗？我试着认为，如果选择了某个元素，则显示这些元素，如果没有，则不显示它们。或者这是不可能的？检查我的更新。。。使用CSS，您可以做到这一点。如果你愿意，我会详细说明的。然而，请注意关于禁用表单字段的警告…：总是被你的想法所蒙蔽。请尽快编写插件：简单看了一下你的答案和语法就背叛了我。它看起来不像json，所以我评论道：希望你不介意。不，那很好——字符串实际上没有正确引用。我不是在开插件玩笑；我只需要先完成一小堆工作……你也可以将HTML5支持的data foo属性用于类似的目的。OP最终说他使用的是ExtJS，而不是jQuery，但想法还是一样的。对。Ext具有类似的隐藏显示功能以及选择器。谢谢你的回答。在Ext vs jQuery上打了一个很好的电话——我更新了我的答案，并添加了一条评论，这样以后的读者也会注意到它。有什么原因导致“映射”中的最后一项是引号，而其余的不是？+1这很酷。如果OP使用了jquery，那么使用$.map@dmackerman:cos会短得多，因为它有一个空格：我对jQuery的答案持开放态度。它包含在页面的一个部分中，但是如果$.map函数有用的话，我希望看到它的实际应用@纳文：谢谢@dmackerman查看我对jQuery解决方案的编辑抱歉，我对ExtJS不太熟练。@naveen是的，我知道，但他想要$.map，所以我会这样做。

$('#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();
});

<select id="artkind">
    <option value="cool">Cool</option>
    <option value="awesome">Awesome</option>
    <option value="rainbow">Rainbow</option>
    <option value="2xrainbow">Double Rainbow</option>
</select>

<input name="url" rel="cool awesome">
<input name="name" rel="cool awesome">
<input name="color" rel="rainbow 2xrainbow">
<input name="size" rel="rainbow 2xrainbow">

<script>
    $('#artkind').change(function() {
        $('input').hide(); // To hide everything
        $('[rel*="'+this.value+'"]').show(); // To show only desired fields
    })
</script>