Множественный выбор списка в форме - PullRequest
Новая
       3

Множественный выбор списка в форме

0 голосов
/ 07 февраля 2019

У меня есть такой вложенный список:

  • Intro (ID: 1)
    • Строки во введении:
      • "Однажды",
      • «Его звали Джек»,
      • «Добро пожаловать»,
      • «Время прошло»
    • Идентификатор изображения во введении:
      • 1,
      • 6,
      • 123
  • Глава 1 (ID: 2)
    • Строки в главе 1:
      • «По прошествии времени»
      • «У старого Макдональда была ферма»
    • Идентификатор изображенияв главе 1:
      • 13,
      • 566,
  • Глава 2 (ID: 3)
    • Строки в главе 2:
      • "Somesomesome",
      • "El final",
      • "Me gustan los barcos"
    • Идентификатор изображения в главе 2:
      • 1,
      • 63,
      • 1523

Я хочу иметь возможность выбрать ни одну, одну или несколько строк, ни одного, один или несколько идентификаторов изображенийи отправить как форму ввода.

Что я уже пробовал:

Поля ввода + кнопки 

<input type="hidden" name="strings" value="StringsInChapter"><br>
<button type="submit" value="Submit">Add</button>

Но с этой опцией, если естьЕсть множество характеристик, есть десятки кнопок «Добавить», и представление просто затопляется ими, что выглядит просто ужасно.

Выбор + опции 

<select name="CharacteristicsIntro" multiple>
<option value="string1">"Once upon a time"</option>
<option value="string2">"Welcome"</option>
<option value="pictureId1">1</option>
<option value="pictureId6">6</option>
</select>

С этой опцией появляется окно:

enter image description here

Это выглядит не очень хорошо, и опять же, представление залито этими полями.Кроме того, прокрутка в этом случае очень неудобна.Мне бы хотелось, чтобы все содержимое отображалось в представлении.

Моя цель несколько близка ко второму варианту, но без рамки с кнопкой прокрутки.Чего я хочу добиться, так это чтобы пользователь видел только мой вложенный список, а не кнопки.Пользователь выбирает несколько строк и при каждом выборе информация сохраняется в HttpContext.Session.Затем пользователь может перейти к чему-то похожему на корзину покупок, где все выборы отображаются в таблице, нажать кнопку «Отправить» и отправить информацию по почте на сервер.Я подозреваю, что нет никакого способа сделать это без JS, но все же, возможно, есть какие-то рекламные объявления о том, как сделать это простым способом?

Следующая картинка приблизительно представляет желаемый результат:

enter image description here

Итак, у каждого пирога есть имя, цена, длинное описание, краткое описание и флаг недели дня.Пользователь может выбрать несколько или не указывать характеристики пирога, которые меняют цвет при касании пользователя (возможны другие сценарии поведения, это всего лишь пример) и добавляются в контекст сеанса.Если пользователь снова нажимает, цвет возвращается к обычному, и элемент удаляется из контекста сеанса.Идея очень близка к нормальному поведению корзины, но без использования флажков или кнопок.

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Я сделал простое решение.Это выглядит не очень хорошо, и иногда это немного глючит, но это работает ... Пусть кто-нибудь найдет это полезным 

function changeColor(elemId) {
    var x = document.getElementById(elemId);

    if (x.style.background == "") {
        x.style.background = "rgb(58, 58, 58)";
        window.sessionStorage.setItem(elemId, "rgb(58, 58, 58)");
    } else if (x.style.background == "rgb(28, 28, 28)") {
        x.style.background = "rgb(58, 58, 58)";
        window.sessionStorage.setItem(elemId, "rgb(58, 58, 58)");
    } else if (x.style.background == "rgb(58, 58, 58)") {
        x.style.background = "rgb(28, 28, 28)";
        window.sessionStorage.removeItem(elemId);
    }

    return false;
}

function setColors() {
    var elem;
    for (var i = 0; i < sessionStorage.length; i++) {
        elem = document.getElementById(window.sessionStorage.key(i));
        elem.style.background = window.sessionStorage.getItem(sessionStorage.key(i));
    }

    return false;
}

Первая функция вызывается так в теге html элемента, который яхотите изменить цвет, например, <a href="#" onclick="changeColor(this.id)>.И в _Layout.cshtml я добавил вызов set() для тела: <body onload="set()">

0 голосов
/ 11 февраля 2019

Я не уверен, что в простом HTML это будет легко сделать.Определенно нужна некоторая работа JS.Но если вы делаете это на каком-то языке C #.В бритве (.cshtml) есть @ Html.ListBoxFor (m => m.SelectedTags, новый MultiSelectList (Model.Tags, "TagID", "Tag"), null).В противном случае это поможет вам, это также плагин JS, чтобы получить данные и отправить их на сервер.https://select2.org/searching (попробуйте выбрать несколько вариантов.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...