Javascript: поиск значений в массиве / объекте для определения отображения формы

Question

Позвольте мне настроить ситуацию:

У меня есть форма. Эта форма имеет несколько полей, которые зависят от одного раскрывающегося списка, назовем его 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 для упрощения, но я бы предпочел не пускать в него другие библиотеки.

Answer 1

Было бы лучше использовать объект со значениями <select>, являющимися ключами.Что касается значений, трудно сказать, не зная более подробной информации.

Если существует всего несколько различных общих настроек страницы - то есть комбинаций показанных вещей и скрытых вещей - тогда может быть проще всего инкапсулироватьв нескольких функциях, и карта должна переходить от выбранного значения к функции:

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's, несколько иное исполнение.

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>

Обратите внимание, я на самом деле не тестировал этот точный код, поэтому не могу гарантировать егоработает как есть.Но я уже использовал этот точный метод раньше для того, о чем вы говорите.