最初に効果について話さないでください:
この効果は、formselect4を使用して完了するlayuiに基づいており、いくつかの必要条件は次のとおりです。
1.selectのプロパティをオンにします
2.正しいjsを導入します(これは本当に長い間探しています)
3.jqueryコードをコピーして貼り付けます
欠点についてコメントしたいと思います。
- - - - - - - - - - - - 境界線 - - - - - - - - - - - - -------
html部分
<label class="layui-form-label">省份</label>
<div class="layui-input-block">
<!--xm-select是下拉多选框的id,xm-select-search-type="dl"表示文字搜索框放置的位置,提前须开启xm-select-search-->
<select xm-select="regionSelect" xm-select-direction="down" xm-select-search xm-select-search-type="dl">
</select>
</div>
jsパート
<!--具体的js地址已上传到头顶资源处,鼠标滚轮往上滑,下载后引入-->
<script type="text/javascript" src="../assets/js-pinyin.js"></script>
JQueryの部分
function loadProvince(del, curr) {
$.ajax({
url: "../assets/city.json",
type: 'get',
dataType: 'json',
success: function (res) {
var arr = [];
$(res).each(function (idx, value) {
arr.push({
name: value.province,
type: "optgroup"
})
$(value.city).each(function (id, val) {
arr.push({
name: val.city_name,
value: val.city_name,
province:value.province
}
)
})
});
formSelects.data('regionSelect', 'local', {
arr: arr
});
formSelects.value('regionSelect', curr);
/*过滤*/
formSelects.filter('regionSelect', function(id, inputVal, val, isDisabled){
if(
/*这段代码是检查省份是否包含*/
PY.fullPY(val.province).toLowerCase().indexOf(inputVal) != -1 || //拼音全拼是否包含
PY.fullPY(val.province, true).indexOf(inputVal) != -1 || //拼音简拼是否包含
val.province.indexOf(inputVal) != -1||
/*这段代码是检查城市是否包含*/
PY.fullPY(val.name).toLowerCase().indexOf(inputVal) != -1 || //拼音全拼是否包含
PY.fullPY(val.name, true).indexOf(inputVal) != -1 || //拼音简拼是否包含
val.name.indexOf(inputVal) != -1 //文本是否包含
){
return false;
}
/*return true表示选项被过滤,隐藏不显示*/
return true;
});
}
})
}