javascript - 通过 ajax 调用使用 jQuery 填充选择选项框

Question

我有一个下拉菜单(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

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

        });