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选项'）.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));
                    });
                }
            });

        });

Answer 2

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

$（'＃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;
                    });
                }
            });

        });

使用j通过ajax调用查询来填充选择选项框

2 个答案: