Bootstrap select2三级结构问题
bootstrap使用select2,当数据为三级结构时会出现无法选择数据项,搜索不准确和层次结构不明显问题。
无法选择数据项解决办法:
找到函数function matcher (params, data) {
无法选择数据项解决办法:
$.each( $("#event_system").find("optgroup optgroup option"), function (i, item) { $("#event_system").find("optgroup").first().append(item) });搜索不准确解决办法:
找到函数function matcher (params, data) {
for (var c = data.children.length - 1; c >= 0; c--) { var child = data.children[c]; var matches = matcher(params, child); // If there wasn't a match, remove the object in the array if (matches == null) { match.children.splice(c, 1); } else{ //添加这一行 match.children[c]=matches; } }调整层次结构样式:
.select2-results__option .select2-results__option { padding-left: 1em; } .select2-results__option .select2-results__option .select2-results__option { padding-left: 2em; } .select2-results__option .select2-results__option .select2-results__group { padding-left: 1.5em; } .select2-results__option .select2-results__option .select2-results__option .select2-results__option { padding-left: 3em; } .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { padding-left: 4em; } .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { padding-left: 5em; } .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { padding-left: 6em; }