通过 ajax 调用使用 jQuery 填充选择选项框答案

【问题标题】：Populate Select Option Boxes using j Query via ajax call通过 ajax 调用使用 jQuery 填充选择选项框
【发布时间】：2019-01-16 16:05:19
【问题描述】：

我有一个下拉列表（select 字段），我根据用户选择的另一个下拉列表来填充它

在选择第一个选项时，第二个下拉字段完美填充
但是当用户选择另一个选项时，新的下拉菜单会进入选项并与前一个选项一起显示

我想要实现的是，当用户单击第一个选择字段的任何下拉菜单时，其各自的值应填充到另一个下拉菜单中

<form action="" method="post" id="form1">
    <div class="row position-relative">
        <div class="col-4 brder p-1">
            <h5>Outlet Name</h5>
        </div>
        <div class="col-8  brder">
            <select class="form-control col-4" id="myselect"
                name="outlet">
                <option>Select Outlet</option>
            </select>                   
        </div>
        <div class="col-4 brder p-1">
            <h5>Outlet Code</h5>
        </div>
        <div class="col-8  brder">
            <select class="form-control col-4" id="outletCode"
                name="outletCode" >                     
            </select>                   
        </div>              
    </div>          
</form>

Ajax 调用填充第一个选择选项

  $.ajax({
              async: true,
              url : "OutletList",
                method : "GET",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                success: function( json ) {
                    $.each(json, function(i, value) {
                        $('#myselect').append($('<option>').text(value).attr('value', value));
                    });
                }
            });

上面的代码将填充第一个选择选项

在第一个的基础上填充新的选择选项

$('#myselect').on('change', function() {
        var selectedOutlet =this.value;
        alert(selectedOutlet);              
          $.ajax({
              async: true,
              url : "OutletCode",
                method : "GET",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                success: function( json ) {
                    $.each(json, function(i, value) {
                        $('#outletCode').append($('<option>').text(value).attr('value', value));
                    });
                }
            });

        });

这段代码工作正常，但没有按我的意愿填充数据

在选择第一个选择选项时，另一个下拉列表会填充第一个选项的相应值，但是当用户再次单击第一个选择字段时，它会使用新下拉列表填充第二个选择字段，但之前的值仍然存在还有
我只想在第二个选择字段中填充一个值，即outletCode

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要删除预览选项。您可以将此代码放在成功回调上以删除所有预览选项：

$('#outletCode option').remove()

$('#myselect').on('change', function() {
        var selectedOutlet =this.value;
        alert(selectedOutlet);              
          $.ajax({
              async: true,
              url : "OutletCode",
                method : "GET",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                success: function( json ) {
                    # Remove preview options
                    $('#outletCode option').remove()
                    $.each(json, function(i, value) {
                        $('#outletCode').append($('<option>').text(value).attr('value', value));
                    });
                }
            });

        });

【讨论】：

【解决方案2】：

这是因为您在第二个下拉菜单中使用了 append：

$('#outletCode').append($('').text(value).attr('value', value));

每次添加新选项时，您都必须将先前添加的选项删除到第二个下拉列表中。您可以将前一个选项保存在全局变量中，并在每次将新选项附加到第二个下拉列表时将其删除。

var previousOption;
$('#myselect').on('change', function() {
        var selectedOutlet =this.value;
        alert(selectedOutlet);              
          $.ajax({
              async: true,
              url : "OutletCode",
                method : "GET",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                success: function( json ) {
                    $.each(json, function(i, value) {
                        $('#outletCode').append($('<option>').text(value).attr('value', value));
                        $("#outletCode option[value="+previousOption]).remove();
                        previousOption = value;
                    });
                }
            });

        });

【讨论】：