Javascript 通过ajax调用使用j Query填充选择选项框

我有一个下拉列表（

选择

字段），我根据用户选择的另一个下拉列表填充该下拉列表

• 选择第一个选项后，第二个下拉字段将完全填充
• 但当用户选择另一个选项时，新的下拉列表进入选项并与前一个一起显示
• 我试图实现的是，当用户单击第一个选择字段的任何下拉列表时，其各自的值应填充到另一个下拉列表中

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

$.ajax({
async:true，
url:“发件清单”，
方法：“获取”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
成功：函数（json）{
$.each（json，函数（i，值）{
$（'#myselect'）.append（$（''）.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));
                    });
                }
            });

        });

$（'#myselect'）。在（'change'，function（）上{
var selectedOutlet=this.value；
警报（选择输出）；
$.ajax({
async:true，
url:“OutletCode”，
方法：“获取”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
成功：函数（json）{
$.each（json，函数（i，值）{
$（'#outletCode'）.append（$（''）.text（value.attr（'value'，value））；
});
}
});
});

这段代码运行良好，但没有按照我的要求填充数据

• 在选择第一个选择选项时，另一个下拉列表将填充第一个选项的相应值，但当用户再次单击第一个选择字段时，它将使用新的下拉列表填充第二个选择字段，但之前的值也保留在那里
• 我只想在第二个选择字段中填充一个值，即

  outletCode

---

这是因为您在第二个下拉列表中使用了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;
                    });
                }
            });

        });

var-previousOption；
$（'#myselect'）。在（'change'，function（）上{
var selectedOutlet=this.value；
警报（选择输出）；
$.ajax({
async:true，
url:“OutletCode”，
方法：“获取”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
成功：函数（json）{
$.each（json，函数（i，值）{
$（'#outletCode'）.append（$（''）.text（value.attr（'value'，value））；
$（“#outletCode选项[value=“+previousOption]）。删除（）；
previousOption=值；
});
}
});
});

您需要删除预览选项。您可以将此代码置于成功回调以删除所有预览选项：
$（'#outletCode选项'）。删除（）

$（'#myselect'）。在（'change'，function（）上{
var selectedOutlet=this.value；
警报（选择输出）；
$.ajax({
async:true，
url:“OutletCode”，
方法：“获取”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
成功：函数（json）{
#删除预览选项
$（'#outletCode选项'）。删除（）
$.each（json，函数（i，值）{
$（'#outletCode'）.append（$（''）.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 ) {
                    # Remove preview options
                    $('#outletCode option').remove()
                    $.each(json, function(i, value) {
                        $('#outletCode').append($('<option>').text(value).attr('value', value));
                    });
                }
            });

        });