Html/jQuery - 使用 multi-select jquery ui 下拉菜单但无法正常工作
Html/jQuery - Used multi-select jquery ui dropdown but not working proprely
问题: 将选项附加到不同的下拉列表而不是 multiselect 下拉列表
我已经给出了所有代码并使用了 multiselect()
函数,但实际上选项附加到不同的新 select 标签而不是 multiselect 下拉列表。
请参考图像以了解实际工作情况,这是不正确的。
这里是Fiddle
HTML
<select id="impact-report-type-filter-input" name="impact-report-type-filter-input" multiple='multiple'>
</select>
Jquery
$(document).ready(function() {
$("#impact-report-type-filter-input").multiselect({
noneSelectedText: 'Select Legends',
minWidth: 165,
header: "Select Legend(s)",
});
getDropDownOptions()
})
function getDropDownOptions(filterType) {
$.ajax({
'async': false,
'type':'POST',
'url':"/" + $("#app").val() + "/reports/getDataforChart"
'success':function(data) {
console.log(data)
var xml = data.xml;
var filterList = data.filterList;
alert(Object.prototype.toString.call(filterList));
for(f in filterList){
$('#impact-report-type-filter-input').append($('<option>', {
value: filterList[f],
text: filterList[f]
}));
}
$("#impact-report-type-filter-input").multiselect("rebuild");
/*var html = '';
for (var i = 0, len = filterList.length; i < len; ++i) {
html.join('<option value="' + filterList[i]['value'] + '">' + filterList[i]['label'] + '</option>');
}
$('#impact-report-type-filter-input').append(html);*/
typeFilterChartID.setXMLData(xml) ;
var dataPieData = document.getElementById("impact-report-type-filter") ;
typeFilterChart.render(dataPieData);
}
});
}
答:忘了刷新 $("#impact-report-type-filter-input").multiselect("refresh");
只需将上面jQuery getDropDownOptions(filterType)
函数中的$("#impact-report-type-filter-input").multiselect("rebuild");
替换为$("#impact-report-type-filter-input").multiselect("refresh");
即可。
问题: 将选项附加到不同的下拉列表而不是 multiselect 下拉列表
我已经给出了所有代码并使用了 multiselect()
函数,但实际上选项附加到不同的新 select 标签而不是 multiselect 下拉列表。
请参考图像以了解实际工作情况,这是不正确的。
这里是Fiddle
HTML
<select id="impact-report-type-filter-input" name="impact-report-type-filter-input" multiple='multiple'>
</select>
Jquery
$(document).ready(function() {
$("#impact-report-type-filter-input").multiselect({
noneSelectedText: 'Select Legends',
minWidth: 165,
header: "Select Legend(s)",
});
getDropDownOptions()
})
function getDropDownOptions(filterType) {
$.ajax({
'async': false,
'type':'POST',
'url':"/" + $("#app").val() + "/reports/getDataforChart"
'success':function(data) {
console.log(data)
var xml = data.xml;
var filterList = data.filterList;
alert(Object.prototype.toString.call(filterList));
for(f in filterList){
$('#impact-report-type-filter-input').append($('<option>', {
value: filterList[f],
text: filterList[f]
}));
}
$("#impact-report-type-filter-input").multiselect("rebuild");
/*var html = '';
for (var i = 0, len = filterList.length; i < len; ++i) {
html.join('<option value="' + filterList[i]['value'] + '">' + filterList[i]['label'] + '</option>');
}
$('#impact-report-type-filter-input').append(html);*/
typeFilterChartID.setXMLData(xml) ;
var dataPieData = document.getElementById("impact-report-type-filter") ;
typeFilterChart.render(dataPieData);
}
});
}
答:忘了刷新 $("#impact-report-type-filter-input").multiselect("refresh");
只需将上面jQuery getDropDownOptions(filterType)
函数中的$("#impact-report-type-filter-input").multiselect("rebuild");
替换为$("#impact-report-type-filter-input").multiselect("refresh");
即可。