主页 / coding / 问题 / 79336130
Accepted
vbulash
Asked: 2025-01-07 21:13:49 +0800 CST

初始化控制时忽略 Select2 数据

  • 772

我的 HTML 代码是：

<select id="block-permissions" name="permissions" multiple="multiple">
    {{-- <option value="0">Topic 0</option> When uncomment works fine! --}}
</select>

我的 JS 代码是：

    $(function() {
            // const permissions = @json($permissions)
            //
            const permissions = {
                results: [{
                    text: "Group 1",
                    children: [{
                            id: 1,
                            text: "Topic 1",
                            selected: true
                        },
                        {
                            id: 2,
                            text: "Topic 2",
                            selected: true
                        },
                        {
                            id: 3,
                            text: "Topic 3",
                            selected: false
                        }
                    ]
                }]
            }

            $('#block-permissions').select2({
                data: permissions,
            })
        })

Select2 控件仅适用于主题 0（预定义 HTML 数据），但完全忽略 JS 数据。

怎么了？

jquery

1 个回答

  1. Best Answer

    我必须修改文档中的内容以删除“结果”键并像下面这样设置对象：

    const permissions = [{
      text: "Group1",
      children: [{
          id: "1",
          text: "Option 1",
          selected: true
        },
        {
          id: "2",
          text: "Option 2",
          selected: true
        }
      ]
    },
    {
      text: "Group2",
      children: [{
          id: "3",
          text: "Option 3",
          selected: true
        },
        {
          id: "4",
          text: "Option 4",
          selected: false
        }
      ]
    }
  ];

    以下是有效代码片段：

    $(function() {
            
   const permissions = [{
      text: "Group1",
      children: [{
          id: "1",
          text: "Option 1",
          selected: true
        },
        {
          id: "2",
          text: "Option 2",
          selected: true
        }
      ]
    },
    {
      text: "Group2",
      children: [{
          id: "3",
          text: "Option 3",
          selected: true
        },
        {
          id: "4",
          text: "Option 4",
          selected: false
        }
      ]
    }
  ];

  $('#block-permissions').select2({
        placeholder: 'Select one or more',
        data: permissions
  });
});
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<select style="min-width:25%;width:25%;" id="block-permissions" name="permissions" multiple="multiple">
</select>

<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    • 1

相关问题