javascript - 如何阻止依赖下拉列表的早期选项显示？

Question

我使用 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);
                });
            }
        });

Answer 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);
            }
        });