Question

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

简介（ID：1）
- 字符串介绍：
  - “从前”，
  - “他的名字叫杰克”，
  - “欢迎”，
  - “时间过去了”
- 简介中的图片ID：
  - 1，
  - 6，
  - 123
第1章（ID：2）
- 第1章中的字符串：
  - “随着时间的流逝”，
  - “老麦当劳有一个农场”
- 第1章中的图片ID：
  - 13，
  - 566，
第2章（ID：3）
- 第2章中的字符串：
  - “某某”，
  - “ El final”，
  - “我的古斯塔·洛斯·巴尔科斯”
- 第2章中的图片ID：
  - 1，
  - 63，
  - 1523

我希望能够选择一个，一个或多个字符串，一个，一个或多个图片ID，然后将其作为表单输入提交。

我已经尝试过的：

输入字段+按钮

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

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

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

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

以下图片大致代表了所需的输出：

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

谢谢！

Answer 1

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

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

在要更改颜色的元素（例如<a href="#" onclick="changeColor(this.id)>）的html标记中，这样调用第一个函数。在_Layout.cshtml中，我向set()添加了对正文的调用：<body onload="set()">

表单中的多个选择列表

2 个答案: