Question

让我说明情况：

我有一张表格。此表单有几个字段，这些字段取决于单个下拉列表，我们称之为 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的答案，但我宁愿将其他库保留在其中。

Answer 1

最好使用一个对象，<select>值是键。现在关于价值观，如果不了解更多细节，很难说。

如果只有几个不同的整体页面设置 - 即显示的内容和隐藏的东西的组合 - 那么将这些设置封装在一些函数中可能是最容易的，并使映射从选定的值转到函数： / p>

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插件来满足这个需求:-)如果我这样做，我会在几个月后更新答案。（我已经得到了代码;我只需要将它从当前的上下文中拉出来。）

Answer 2

与@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();
});

Answer 3

我通过使用'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>

注意，我实际上没有测试过这个确切的代码，所以我不能保证它按原样运行。但是我之前已经使用了这个确切的方法，而不是你正在讨论的事情。

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

3 个答案:

修改