Yii2 Kartik connect Select2和Sortable Input

我正在使用来自kartik的和小部件。我想用select2选择一些东西，并在sortableinput小部件中包含所选元素。我想知道我怎样才能做到这一点。只有js？还是必须使用ajax/pjax？因为我对这个话题还不熟悉，所以从哪里开始提供一些帮助会很酷

再见

编辑：

Select2使用ajax和搜索地址。如果选择了找到的地址，则应将数据放入可排序输入字段。因此，可以制作一个地址列表。在可排序输入中，可以对地址进行排序。有关原型，请参见下图和基本代码

并设置可排序输入列表的id：

$form->field($model, 'sort_list')->label(false)->widget(SortableInput::classname(), [
    'items' => [
        1 => ['content' => 'Adress #1'],
        2 => ['content' => 'Adress #2'],
        3 => ['content' => 'Adress #3'],
    ],
    'hideInput' => false,
    'options' => ['class' => 'form-control', 'readonly' => true, 'id'=>'address']
]);

您可以通过在select2的select:select事件中使用javascript来实现

要在可排序列表中添加新项，可以使用DOMParser.parseFromString为新项li添加html，我假设html节点类似于地址内容，然后使用querySelector.appendChild将其添加到.js可排序按钮容器中

您应该将视图顶部的javascript块更新为以下内容

$ajaxJs = <<< JS
function(e) {
    doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white">${e.currentTarget.options[e.currentTarget.options.selectedIndex].text}</li>`, "text/html").body.firstChild;
    document.querySelector('.js-sortable-buttons').appendChild(doc);
}
JS;    

---

有关更多示例，您可以访问yii2可排序表的基础示例。

您可以通过从select2中选择选项来添加更多说明吗？您希望拖动或重新排列类似的选项，还是仅选择/突出显示类似的选项。@MuhammadOmerAslam感谢您的评论。我更新了我的问题。现在应该更清楚了。好的，那么你想把你点击的地址作为新元素添加到可排序输入列表中吗？如果这是正确的，那么我看到您正在使用select2:select事件，并在php var$ajaxJs中传递一些javascript。当您选择一个地址时，您可以显示您当前在做什么吗？抱歉，javascript位于顶部，我之前没有看到它忽略我之前评论的最后一部分是的，您需要通过调用sortable“.js sortable buttons”初始化sortable；，我在我的回答中提供了链接html5sortable，您可以在运行时添加可排序项并重新初始化它们。我想您会在@Luc中查看它，谢谢您的回复。我读了链接，但不太明白如何实际调用排序表。我用答案更新了我的问题。因此，我必须获取列表并调用sortable:$'address-sortable'。sortable；和你建议的不太一样，但它有效。

$ajaxJs = <<< JS
function(data) {
    doc = new DOMParser().parseFromString('<li data-key="' + (document.querySelector('.sortable').childElementCount + 1) + '"role="option" aria-grabbed="false" draggable="true">' + data.params.data.street + '</li>', "text/html").body.firstChild;
    document.querySelector('.sortable').appendChild(doc);
    $('#address-sortable').sortable();
}
JS;

$form->field($model, 'sort_list')->label(false)->widget(SortableInput::classname(), [
    'items' => [
        1 => ['content' => 'Adress #1'],
        2 => ['content' => 'Adress #2'],
        3 => ['content' => 'Adress #3'],
    ],
    'hideInput' => false,
    'options' => ['class' => 'form-control', 'readonly' => true, 'id'=>'address']
]);

$ajaxJs = <<< JS
function(e) {
    doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white">${e.currentTarget.options[e.currentTarget.options.selectedIndex].text}</li>`, "text/html").body.firstChild;
    document.querySelector('.js-sortable-buttons').appendChild(doc);
}
JS;