表单内的多个选择列表答案

【问题标题】：Multiple select list within form表单内的多个选择列表
【发布时间】：2019-07-01 10:24:11
【问题描述】：

我有一个这样的嵌套列表：

简介 (ID: 1)
- 介绍中的字符串：
  - “从前”，
  - “他叫杰克”，
  - “欢迎”，
  - “时间过去了”
- 图片ID简介：
  - 1,
  - 6,
  - 123
第1章（ID：2）
- 第 1 章中的字符串：
  - “随着时间的流逝”，
  - “老麦当劳有个农场”
- 第 1 章中的图片 ID：
  - 13,
  - 566,
第2章（ID：3）
- 第 2 章中的字符串：
  - “有些人”，
  - “埃尔决赛”，
  - “我古斯坦洛斯巴科斯”
- 第 2 章中的图片 ID：
  - 1,
  - 63,
  - 1523

我希望能够选择无、一个或多个字符串、无、一个或多个图片 ID 并作为表单输入提交。

我已经尝试过的：

输入框+按钮

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

但是如果有很多特征的话，用那个选项的话，有几十个按钮“添加”，View里简直就是被它们淹没了，看起来很糟糕。

选择 + 选项

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

使用该选项会出现一个框：

这看起来不太好，而且视图再次被这些框淹没。此外，在这种情况下滚动非常不舒服。我希望所有内容都显示在视图上。

我的目标有点接近第二个选项，但没有带有滚动按钮的周围框。我想要实现的是，用户只能看到我的嵌套列表，没有按钮。用户选择多行，每个选择信息都保存在HttpContext.Session 中。然后，用户可以转到购物车之类的东西，其中所有选择都显示在表格中，单击“提交”按钮并通过邮件将信息发送到服务器。我怀疑没有 JS 就没有办法做到这一点，但仍然可能有任何关于如何以简单的方式做到这一点的建议？

下图大致代表了想要的输出：

因此，每个馅饼都有名称、价格、长、短描述和星期标志。用户可以选择饼图的多个特征或无特征，这些特征在用户点击时会改变颜色（其他行为场景也是可能的，这只是一个示例）并添加到会话上下文中。如果用户再次点击，颜色将恢复正常，并且该项目将从会话上下文中删除。这个想法非常接近正常的购物车行为，但没有使用复选框或按钮。

提前致谢！

【问题讨论】：

请添加所需输出的可视化表示，无论它是具有多个选择/多个下拉列表的表单
嗨！感谢您的评论。添加了一张可能说明总体思路的图片
使用 JS 相对容易做到这一点，我相信不用 JS 也可以通过使用多个 select 语句来实现，但它很乏味并且代码很多，你最好在JS

标签： c# html asp.net razor asp.net-core

【解决方案1】：

我不确定在简单的 HTML 中是否很容易做到这一点。绝对需要一些 JS 工作。但是，如果您使用某种语言 C# 执行此操作。在 razor(.cshtml) 中有 @Html.ListBoxFor(m => m.SelectedTags, 新的 MultiSelectList(Model.Tags, "TagID", "Tag"), null)。否则这将对您有所帮助，这也是一个 JS 插件，用于获取数据并将其发送到 servere。 https://select2.org/searching （尝试多选示例。）

【讨论】：

【解决方案2】：

我做了一个简单的解决方案。它看起来不太好，有时有点错误，但它确实有效......希望有人会觉得它有用

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()">

【讨论】：