Select2 已输入的过帐值

Posted 2023-05-07

【中文标题】Select2 已输入的过帐值

【英文标题】：Select2 posting values that have been entered

【发布时间】：2017-03-15 22:55:49

【问题描述】：

我在我的 asp.net mvc 网站中使用 select2 并让它适用于 html <select>。但是，我发现很难找到一种方法来检索用户在提交时输入的值。一旦进入@using (Html.BeginForm) 元素，select2 就不再起作用，只是显示为默认值。我试过这个教程，但它不适合我：http://www.datahaunting.com/mvc/select2-simple-example-in-asp-net-mvc/

这是我目前拥有的以及我尝试过的：

@model AssignerWebTool.Models.CreateUserModel
@
ViewBag.Title = "Create User";

<select id="select" class="select" multiple="multiple"> //This works but I have no way of getting the values entered
<option></option>
</select>

<h2>Create User</h2>
@using (Html.BeginForm("Create", "user", FormMethod.Post, new  @class = "select", role = "form" ))

@Html.AntiForgeryToken()
<h4>Create a new account.</h4>
<hr/>
@Html.ValidationSummary("", new @class = "text-danger")
<div class="form-group">
    @Html.LabelFor(m => m.Email, new @class = "col-md-2 control-label")
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.Email, new id = "select" ) //This does not work and does not select2

        <select id="select" class="select" multiple="multiple"> //Also does not work now inside of here
            <option></option>
        </select>
    </div>
</div>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" class="btn btn-default" value="Create User"/>
    </div>
</div>




@section scripts

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script>
    $(function () 

        $("#select").select2(
            placeholder: "Email address(es)",
            tags: true,
            tokenSeparators: [',', ' ']
        );
    );
</script>

【问题讨论】：

当您尝试上面的代码时，除了您当时尝试的选择之外，您是否摆脱了选择尝试？您有 3 个 id="select" 元素，运行 select2 的 jquery 仅适用于它找到的第一个元素。请通过注释掉第一个选择来重试，然后看看下一个是否有效。

这确实解决了我遇到的问题之一，而且很有意义。我仍然无法让它为 @Html.TextBoxFor 元素工作，即使我只是在它上面使用 id="select" 。有什么建议吗？

我尝试复制，但我意识到我不确定您在使用 TextBoxFor 时遇到了什么问题。当我使用完整的 js 库时，我遇到的唯一问题得到了解决：select2.full.min.js - 不确定你是否想尝试。问题是什么，它是在没有呈现 jquery 控件的情况下默默地失败还是出现错误？

是的，试过了，它至少变成了一个 select2 框。我现在遇到的问题是它只是使用默认的选择 2，标签和标记分隔符不起作用，但占位符正在工作。文本框可能不支持它们吗？感谢您迄今为止的帮助

【参考方案1】：

从 cmets 我们调整了以下内容：

-只有 1 个 id="select" 的元素通过 JQuery 选择来启用 Select2 功能。

-使用 v4.0.x 的 select2.full.js 库以完全向后兼容 v3.5.x

似乎对于在 Select2 v4.0.x 中使用的 <input type="text">（通过问题代码示例中的 @Html.TextBoxFor() 生成）字段存在限制（https://github.com/select2/select2/releases 列出“有限支持”对于 v4.0.0 RC1)，其中包含的标签和标记分隔符不起作用。

不要使用 html 助手生成的输入字段 - 使用选择字段，因为建议与 Select2 一起使用（请参阅 v4.0.0 的发行说明），并确保它在表单内并设置了 name 属性到模型的属性，如果你想加载控制器通过模型传递的值，那么也循环遍历这些值：

<select id ="select" name="Email" class="select" multiple="multiple">
    @foreach (var item in Model.Email)
        
            <option>@item </option>
        
    
</select>

另外，如果 Email 只是一个字符串，它只会在提交表单时从 select 元素中获取第一个选定的项目（如果至少依赖模型绑定），要获得更多信息，您可以将属性设置为 @987654325 @ 或 SelectList，此时您可以返回使用 html 帮助程序，但使用 DropDownFor 来生成 select 元素（尽管您不需要，生成的 html 基本上与上面相同）。

@Html.DropDownListFor(m => m.Email, Model.Email, new  multiple = "multiple" )

你也可以直接在自动生成的id上调用Select2：

$("#Email").select2(

并在您的 userController 中处理已发布的表单：

[HttpPost]
public ActionResult Create(CreateUserModel model)

  ...

通过模型绑定，这不是唯一的方法，但我会推荐。

希望这对您有所帮助！

【讨论】：

我并不担心实际为下拉列表传递值，我更多的是寻找要标记化的值，因为它们在此示例中输入：select2.github.io/examples.html#tokenizer 看来这可能不是除非我遗漏了什么，否则有可能吗？

如果我使用 是否有办法在提交表单时传递输入的值？

想通了，可以从,select中获取数据。使用 Request.Form["Email"] 的元素。谢谢你对我的帮助很大。