Question

我目前正在做一个项目，我需要添加一些动态下拉菜单。我遇到了一个问题，我在下面的代码中为 2 个下拉菜单添加了 ajax 调用，然后我需要在不同的文件中做几乎相同的事情多次，因为功能不太相同，差异类似于代码中下面 2 个 ajax 调用之间的差异。在我看来，相似的代码太多了，我不知道是否有办法制作它们全部合并为 1 个功能并进行一些更改，还是应该这样做

$("#edit-account li #municipality").on('change', function(){
      var mid = $(this).children(":selected").val();
      var post_number = $('#zip');
      var streets = $('#street');
      streets.prop("disabled" , true);
      post_number.val("");
     
      $.ajax ({
          type: "POST",
          dataType: "json",
          data : { mid: mid },
          url: baseUrl + '/ajax/get-city' ,
          success: function (result) {           
              $("#acc-city").prop("disabled", false);
              var dropdown = $('#city');
              var dropdown2 = $('#street');
              dropdown2.empty();
              dropdown.empty();
              dropdown.append('<option selected="true" style="display:none;"  value="">Chose City</option>');
              dropdown2.append('<option selected="true"  style="display:none;" value="">Choose Street</option>');
              dropdown.prop('selectedIndex', 0);
              dropdown2.prop('selectedIndex', 0);
              $.each(result, function(number,city) {    
                  dropdown.append(`<option data-ptt="${city.pttno}" value="${city.id_town}">${city.name}</option>`);
              });
               
          },
          error: function (xhr, ajaxOptions, thrownError) {
              console.log(thrownError);  
          },
          complete: function (result) {
              var mandatory = ["first_name", "last_name", "phone",  "zip","municipality","city","street" ];
              checkFields(mandatory);
          }
      }); 
  });
  
  $("#edit-account li #city").on('change', function(){
      var tid = $(this).children(":selected").val();
      var ptt = $(this).children(":selected").data("ptt");
      var post_number = $('#zip');
      post_number.val(ptt);
  
      $.ajax ({
          type: "POST",
          dataType: "json",
          data : { tid: tid },
          url: baseUrl + '/ajax/get-street' ,
          success: function (result) {
              var drop = $('#street');
              drop.prop("disabled" , false);
              drop.empty();
              drop.append('<option selected="true" disabled style="display:none;" value="">Choose street</option>');
              drop.prop('selectedIndex', 0);
              if(result.length == 0){
                  drop.append('<option  disabled >No Results</option>');
              }
              $.each(result, function(number,street) {
                  drop.append(`<option value="${street.id_street}">${street.street_name}</option>`);
              });
              var mandatory = ["first_name", "last_name", "phone",  "zip","municipality","city","street" ];
              checkFields(mandatory);   
          },
          error: function (xhr, ajaxOptions, thrownError) {
              alert(xhr.status);   
          },
          complete: function (result) {         
          }
      }); 
  });

Answer 1

这是我的第一个快速剪辑。我们也可以对每个函数做更多的事情

$("#edit-account li #municipality").on('change', function(){
    var mid = $(this).children(":selected").val();
    var post_number = $('#zip');
    var streets = $('#street');
    streets.prop("disabled" , true);
    post_number.val("");

    $.ajax ({
        type: "POST",
        dataType: "json",
        data : { mid: mid },
        url: baseUrl + '/ajax/get-city' ,
        success: function (result) {           
            $("#acc-city").prop("disabled", false);
            var ddCity = $('#city');
            var ddStreet = $('#street');
            resetDropdown(ddCity,'Choose City');
            resetDropdown(ddStreet,'Choose Street');
            $.each(result, function(number,city) {  
                ddCity.append(`<option data-ptt="${city.pttno}" value="${city.id_town}">${city.name}</option>`);
            });
            
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError);  
        },
        complete: function (result) {
            var mandatory = ["first_name", "last_name", "phone",  "zip","municipality","city","street" ];
            checkFields(mandatory);
        }
    }); 
});

$("#edit-account li #city").on('change', function(){
    var tid = $(this).children(":selected").val();
    var ptt = $(this).children(":selected").data("ptt");
    var post_number = $('#zip');
    post_number.val(ptt);

    $.ajax ({
        type: "POST",
        dataType: "json",
        data : { tid: tid },
        url: baseUrl + '/ajax/get-street' ,
        success: function (result) {
            var ddStreat = $('#street');
            ddStreat.prop("disabled" , false);
            resetDropdown(ddStreat,"Choose street");

            if(result.length == 0){
                drop.append('<option  disabled >No Results</option>');
            }
            $.each(result, function(number,street) {
                ddStreat.append(`<option value="${street.id_street}">${street.street_name}</option>`);
            });
            var mandatory = ["first_name", "last_name", "phone",  "zip","municipality","city","street" ];
            checkFields(mandatory);   
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);   
        },
        complete: function (result) {         
        }
    }); 
});


function resetDropdown(dropdown,defaultText){
    dropdown.empty();
    dropdown.append('<option selected="true" style="display:none;"  value="">' + defaultText+ '</option>');
    dropdown.prop('selectedIndex', 0);
}

重复几乎相同的功能

1 个答案: