Select2：设置下拉列表的默认值，从 C# 模型中获取的数据以剃刀语法

Posted 2023-04-13

【中文标题】Select2：设置下拉列表的默认值，从 C# 模型中获取的数据以剃刀语法

【英文标题】：Select2: Set Default value for list of dropdown items, data obtained from C# Model in razor syntax

【发布时间】：2021-06-24 14:28:50

【问题描述】：

我有一个 select2 下拉菜单，我想为列表项选择默认值。当我使用硬代码值来设置下拉列表的默认值时，它工作正常 $('#PlatFormTitle').val(['1','2','3']);

但我想根据从模型中获得的数据来选择值。 这是我正在尝试的代码，有人可以找出我在这里做错了什么。

    var PlateForms = [];

    var x;
    @foreach(var PlateForm in Model.UserPlateFormList)
    
        @:x = '@PlateForm';
        @:PlateForms.push(x);
     
    $('#PlatFormTitle').val(PlateForms);
    $('#PlatFormTitle').trigger('change');

我也试过了。

$('#PlatFormTitle').val(JSON.stringify(PlateForms));
$('#PlatFormTitle').trigger('change');

【问题讨论】：

你能添加一个工作的 sn-p 来显示它使用“硬编码值”吗？ SO wiki for select2 包含使 select2 工作的代码。然后查看您的 rendered html（不是剃刀），看看有什么区别。因为select2是一个js组件。

【参考方案1】：

我用你的代码测试，它可以工作，这里是演示：

型号：

public class Model1 
        public List<int> UserPlateFormList  get; set; 
    

控制器：

public IActionResult Index()
        
            Model1 m = new Model1  UserPlateFormList = new List<int>  1, 2, 3  ;
            return View(m);
        

查看：

<select id="PlatFormTitle" class="js-example-basic-multiple" multiple="multiple" style="width:200px">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
</select>

js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
 <script>
        $(function () 
            $('.js-example-basic-multiple').select2();
            var PlateForms = [];
            var x;
            @foreach (var PlateForm in Model.UserPlateFormList)
            
                @:x = '@PlateForm';
                @:PlateForms.push(x);
            
                $('#PlatFormTitle').val(PlateForms);
                $('#PlatFormTitle').trigger('change');
        );
</script>

结果：

【讨论】：

我正在做同样的事情，但它不适合我。

如果你用我的css和js，能用吗？你的UserPlateFormList是List<int>吗？

非常感谢依依。它对我有用。我接受你的回答。如果您认为这是一个有效的问题，请支持我的问题。