README

HTML select 元素链，当更改时，会发送 ajax 请求以更改位于链下方的 select 的内容。
如果用户更改了 select 中的当前元素，则应执行获取相邻下方 select 中所有可用选项的请求。

这里的链是由单链 HTML 元素 select 组成的，即每个元素仅与其下方的相邻元素交互。可以从任意元素开始遍历整个链。

例如，一个修理仪器的维修店。
“仪器类型”字段依赖于“工作类型”字段（维修、清洁仪器等），而“工作类型”字段依赖于“维修后仪器的类型”字段（配送服务、自取）。
假设更改一个字段时，下一个字段应该根据 ajax 获取的所有选项进行更新，因为每种仪器可能有不同的配送选项。
例如，冰箱不适合自取，而茶壶不需要通过配送服务配送。
因此，我们得到了这样的链：仪器类型 -> 工作类型 -> 配送类型。上方的元素是 仪器类型，下方的元素是 配送类型。

此模块的工作逻辑如下。
在初始化时，为所有选择器指定 onchange 处理器。在 ajax 请求中，假设从服务器返回了如下对象

{
    success: true,
    data: [здесь лежат все элементы]
}

或者错误时

{
    success: false,
    errorMessage: 'ACTHUNG!'
}

处理器的逻辑。

在 ajax 请求之前（beforeSend 函数）禁用链下方的所有元素。
默认情况下，请求发送以下对象

{
    'data': 'value'
}

其中 value 是选择器内的文本。可以在 ajax.data 元素中重写此对象（见下面的示例）。

在 ajax 请求之后，当前元素下方的元素启用。
下方的元素使用从响应中获取的数组数据填充。

可以为这些函数指定其他处理器（见下面的数组），但上述逻辑仍将默认执行。

[
{
    selector: '#order-typeoforder',
    ajax: {
        url: '//site.com/order/get-types-of-device',
        method: 'POST',
        data: {
            'typeOfOrder': '{value}'
        },
        beforeSend: function() { ... } || null,
        afterSend: function() { ... } || null
    }
},
{
    selector: '#order-typeofdevice',
    ajax: {
        url: '//site.com/order/get-types-of-delivery',
        method: 'POST',
        data: {
            'deliveryType': '{value}'
        },
        beforeSend: function() { ... } || null,
        afterSend: function() { ... } || null
    }
},
{
    selector: '#order-typeofdelivery',
    ajax: {
        ...
    }
},
...
]

beforeSend 和 afterSend 是在发送 ajax 请求前后执行的回调函数。
这里的 dataFieldName 大约意味着以下内容

$.ajax({
    data: {
        dataFieldName: $(selector).text()
    }
});

即它将作为对象的键与选择器 selector 的内容一起发送。

安装

使用 composer

composer require hatand\yii2-selects-chain-widget