我使用ajax调用填充两个依赖的下拉列表。问题是如果我多次更改我的选择(主下拉列表),所有相关选项(较早的值)将显示在从属下拉列表中。这是我的ajax电话
$.ajax({
type: "GET",
url: "index.php?r=orders/on-select",
data: {myVar: myVar},
success: function (data) {
var jdata = JSON.parse(data);
var cluster = jdata.Clusters;
var sites = jdata.Sites;
$.each(cluster, function (optionValue, optionLabel) {
var option = $('<option value="' + optionLabel + '">' + optionLabel + '</option>');
$('[ref="region"]').find('[name="list box element"]').append(option);
var opnGrpval = $('<li value="' + optionValue + '">' + optionLabel + '</li>');
$('[ref="region"]').find('.selectBoxInput').find('.dropDownBox').append(opnGrpval);
});
$.each(sites, function (optionValue, optionLabel) {
var option = $('<option value="' + optionLabel + '">' + optionLabel + '</option>');
$('[ref="sites"]').find('[name="list box element"]').append(option);
var opnGrpval = $('<li value="' + optionValue + '">' + optionLabel + '</li>');
$('[ref="sites"]').find('.selectBoxInput').find('.dropDownBox').append(opnGrpval);
});
}
});
答案 0 :(得分:1)
然后将append
更改为html
。
$.ajax({
type: "GET",
url: "index.php?r=orders/on-select",
data: {myVar: myVar},
success: function (data) {
var jdata = JSON.parse(data);
var cluster = jdata.Clusters;
var sites = jdata.Sites;
var regionOptions = '';
var dropdownOptions = ''
$.each(cluster, function (optionValue, optionLabel) {
var option = $('<option value="' + optionLabel + '">' + optionLabel + '</option>');
regionOptions += option;
var opnGrpval = $('<li value="' + optionValue + '">' + optionLabel + '</li>');
dropdownOptions += opnGrpval;
});
$('[ref="region"]').find('[name="list box element"]').html(listoptions); $('[ref="region"]').find('.selectBoxInput').find('.dropDownBox').html(dropdownOptions);
var sitesOptions = '';
var sitesDropdownOptions = '';
$.each(sites, function (optionValue, optionLabel) {
var option = $('<option value="' + optionLabel + '">' + optionLabel + '</option>');
sitesOptions += option;
var opnGrpval = $('<li value="' + optionValue + '">' + optionLabel + '</li>');
sitesDropdownOptions += opnGrpval;
});
$('[ref="sites"]').find('[name="list box element"]').html(sitesOptions); $('[ref="sites"]').find('.selectBoxInput').find('.dropDownBox').html(sitesDropdownOptions);
}
});