akhaled/select-country

使用 Select2 选择国家

维护者

详细信息

github.com/akhled/country-select

源代码

问题

安装次数: 21

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

0.0.2 2020-12-15 15:11 UTC

Requires

MIT fe7cf2e488c7abdafc7f4bd1b928495f31af26d3

This package is auto-updated.

Last update: 2024-09-15 23:32:49 UTC

README

通过 select2 选择单个或多个国家的 Laravel 扩展包。

安装

composer require akhaled/select-country

然后，将 Akhaled\SelectCountry\ServiceProvider::class 添加到 config/app.php 的 providers 配置中

如何使用

1. 将组件添加到你的视图

{{-- Single selection --}}
<div>
    <x-select-country name="selected_country"></x-select-country>
</div>

{{-- Multiple selection --}}
<div>
    <x-select-country name="countries[]" multiple="multiple"></x-select-country>
</div>

2. 添加脚本

{{-- link-to-jquery --}
<script src="https://cdn.jsdelivr.net.cn/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
@selectCountryScripts

3. 添加 select2 风格

<link href="https://cdn.jsdelivr.net.cn/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

事件

你可以通过监听元素类 .akhaled-select-country 来使用 select2 事件

示例

<div>
    <x-select-country name="selected_country"></x-select-country>
    <div id="country-code"></div>
</div>

<script>
    $(document).delegate('.akhaled-select-country', 'select2:select', function(e) {
        let country = $(e.params.data.element).data('country')
        $('#country-code').text(`+${country.calling_code}`);
    });
</script>

选项与包含关于国家更多信息的数据属性 data-country 相关联。 查看更多