C# 表单中的多个选择列表

我有一个嵌套列表，如下所示：

简介编号：1 引言中的字符串： 从前 他的名字叫杰克， 欢迎 时光流逝 简介中的图片ID： 1. 6. 123 第一章ID:2 第1章中的字符串： 随着时间的推移， 老麦克唐纳有一个农场 第1章中的图片ID： 13, 566, 第二章ID:3 第2章中的字符串： 有些,， El final， 我是古斯坦·洛斯·巴科斯 第2章中的图片ID： 1. 63, 1523 我希望能够选择无、一个或多个字符串、无、一个或多个图片ID并作为表单输入提交

我已经尝试过的：

输入字段+按钮

但是，如果有很多特性，那么使用该选项可以添加几十个按钮，并且视图中充斥着这些按钮，这看起来很糟糕

选择+选项

使用该选项，将出现一个框：

这看起来不太好，同样，视图中充斥着这些盒子。此外，在这种情况下滚动是非常不舒服的。我希望所有的内容都显示在视图上

我的目标有点接近第二个选项，但没有周围的滚动按钮框。我想要实现的是，用户只看到我的嵌套列表，没有按钮。用户选择多行，每个选择信息都保存在HttpContext.Session中。然后用户可以转到类似购物车的地方，在那里所有选择都显示在一个表中，单击Submit按钮并通过post将信息发送到服务器。我怀疑没有JS是不可能做到的，但在如何用简单的方式做到这一点上，可能还有一些技巧

下图大致表示所需的输出：

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

---

提前谢谢

我不确定在简单的HTML中这样做是否容易。肯定需要一些JS工作。但是如果你用C语言来做这件事。在razor.cshtml中有@Html.ListBoxForm=>m.SelectedTags， 新的MultiSelectListModel.Tags，TagID，Tag，null。否则，这将帮助您这也是一个JS插件获取数据并将其发送到服务器。

---

尝试多选示例。

我已经提出了一个简单的解决方案。它看起来不太好，有时有点像马车，但它很有效。。。希望有人会觉得它有用

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标记中这样调用，例如，请添加所需输出的视觉表示，无论它是带有多个选择/多个下拉列表的表单！谢谢你的评论。添加了一个图片，可以说明一般的想法。使用JS相对容易做到这一点，我相信使用多个select语句也可以在没有JS的情况下实现，但是这很乏味，代码也很多，最好使用JS

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

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