Multiple select list within form

Question

I have a nested list like this:

Intro (ID: 1)
- Strings in introduction:
  - "Once upon a time",
  - "His name was Jack",
  - "Welcome",
  - "Time passed"
- Pictures' ID in introduction:
  - 1,
  - 6,
  - 123
Chapter 1 (ID: 2)
- Strings in Chapter 1:
  - "As the time passed",
  - "Old McDonald had a farm"
- Pictures' ID in Chapter 1:
  - 13,
  - 566,
Chapter 2 (ID: 3)
- Strings in Chapter 2:
  - "somesomesome",
  - "El final",
  - "Me gustan los barcos"
- Pictures' ID in Chapter 2:
  - 1,
  - 63,
  - 1523

I want to be able to select either none, one or more strings, either none, one or more picture ids and submit as a form input.

What I have already tried:

Input fields + buttons

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

But with that option if there are many characteristics, there are dozens of buttons "Add", and the View is simply flooded with them, which just looks awful.

Select + options

<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>

With that option there appears a box:

That doesn't look well and, again, the View is flooded with these boxes. Besides, scrolling in that case is very uncomfortable. I would like that all the contents is displayed on the View.

My aim is somewhat close to the second option, but without the surrounding box with scrolling button. What I want to achieve, is that the user only sees my nested list, no buttons. User selects multiple rows and with each selection info is saved in HttpContext.Session. Then the user can go to something like a shopping cart where all selections are displayed in a table, click "Submit" button and send info via post to the server. I suspect there is no way to do it without JS, but still may be there are any adrices on how to do it in a simple way?

The following picture roughly represents the desired output:

So, each pie has a name, price, long, short description, and week-of-the-day flag. User can choose several or none characteristics of a pie, which change color on user tap (other behavior scenarios are possible, it's just an example) and added to session context. If the user taps again, color reverts back to normal and the item is deleted from the session context. The idea is very close to a normal cart behavior, but without using check boxes or buttons.

Thanks in advance!

please add a visual representation of desired output, whether its a form with multiple select/ multiple dropdown lists — kowsikbabu
– kowsikbabu, Commented Feb 7, 2019 at 10:53
Hi! Thanks for the comment. Added a picture that might illustrate the general idea — ShHolmes
– ShHolmes, Commented Feb 7, 2019 at 13:10
This is relatively easy to do using JS, and I believe is achievable without JS too by using multiple select statements, but it is tedious and a lot of code, you're better off with doing this in JS — kowsikbabu
– kowsikbabu, Commented Feb 7, 2019 at 17:30

Parvesh Yadav · Accepted Answer · 2019-02-11 09:29:15Z

1

I am not sure in simple HTML it will be easy to do this. Definitely some JS work is needed. But if you are doing this in some language C# . In razor(.cshtml) there is @Html.ListBoxFor(m => m.SelectedTags, new MultiSelectList(Model.Tags, "TagID", "Tag"), null). Otherwise this will help you this is also a JS plugin to get the data and send it to servere. https://select2.org/searching (try multi select example.)

answered Feb 11, 2019 at 9:29

Parvesh Yadav

365 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ShHolmes · Accepted Answer · 2019-02-12 10:24:03Z

I have made a simple solution. It doesn't look very good, and it's a bit buggy sometimes, but it works... May someone will find it useful

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;
}

First function is called like this within html tag of the element that I want to change in color, for example, <a href="#" onclick="changeColor(this.id)>. And in _Layout.cshtml I have added call to set() for body: <body onload="set()">

Collectives™ on Stack Overflow

Multiple select list within form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related