jQuery：MultiLevel级联动态下拉列表 - Add＆amp; amp;删除相关下拉列表之间的项目

Question

我有一个下面的级联下拉列表，当一个大陆被选中时，该大陆的相应国家应该加载到其依赖的下拉列表。此外，如果删除某个大陆，则会删除依赖下拉列表中的相应国家/地区。这将适用于国家及其依赖的下拉城市。

这个image将解释所需的输出

(function(){

  jQuery(document).ready(function()
  {
    var DropData1 = [{
         "ContinentId":1,
         "ContinentName":"North America",
         "Country":[
              { "CountryId":"1",
                 "CountryName":"USA",
                  "City":[
                           {
                             "CityId":1,
                             "CityName":"Atlanta"
                            },
                            {
                              "CityId":2,
                              "CityName":"NewYork"
                             },
                             {
                               "CityId":3,
                               "CityName":"Washington"
                              },
                              {
                                 "CityId":4,
                                 "CityName":"Cincinnati"
                               },
                               {
                                  "CityId":5,
                                   "CityName":"Denver"
                                },
                                {
                                    "CityId":6,
                                    "CityName":"SFO"
                                }                                                          ]
                   },
                   {       "CountryId":2,
                           "CountryName":"Canada",
                           "City":[
                                  {
                                    "CityId":1,
                                    "CityName":"Tornoto"
                                    }]
                    },

                    {      "CountryId":3,
                              "CountryName":"Mexico"
                   },

                          { "CountryId":4,
                             "CountryName":"Greenland"                                     }

                         ]
                       },


                       {
                         "ContinentId":2,
                          "ContinentName":"Asia",
                        },
                        {
                         "ContinentId":3,
                          "ContinentName":"Australia",
                        },

                        {
                         "ContinentId":4,
                          "ContinentName":"Africa",
                        },
                        {
                         "ContinentId":5,
                          "ContinentName":"Europe",
                        }

                     ],
    DropData2 = [],
    DropData3 = [],
    addRemoveCountryDropdown ='';
    addRemoveCityDropdown ='';


    $.each(DropData1,function(index,obj)
    {
      $('<option>').val(index+1).text(obj.ContinentName).appendTo('#ContinentLeft');
    });

    $("#btnAddContRight").click(function(e)
    {
      e.preventDefault();
      $("#ContinentLeft option:selected").each(function()
       {
         $("#ContinentRight").append($('<option>').val($(this).val()).text($(this).text()));
         $(this).remove();
      });

      $("#btnRemoveContRight").removeClass("disabled");
      addRemoveCountryDropdown();
    });



    $("#btnRemoveContRight").click(function(e)
    {
      e.preventDefault();
      $("#ContinentRight option:selected").each(function()
       {
         $("#ContinentLeft").append($('<option>').val($(this).val()).text($(this).text()));
         $(this).remove();

         var options = $("#ContinentLeft option");
          options.detach().sort(function(a,b)
          {
             var aValue = $(a).val();
             var bValue = $(b).val();
             return aValue - bValue;
          });
         options.appendTo("#ContinentLeft");

         if(!$("#ContinentRight").has('option').length){
          $("#btnRemoveContRight").addClass("disabled");
          $("CountryLeft").find("option").remove();
          $("CountryRight").find("option").remove();
          $("CityLeft").find("option").remove();
          $("CityRight").find("option").remove();
         }
         addRemoveCountryDropdown();
         });
     });



   addRemoveCountryDropdown = function() {
    $("#CountryLeft").find("option").remove();
    $("#ContinentRight option").each(function()
    {
      var $this = $(this);

      $.each(DropData1,function(index,obj)
      {
        if(obj.ContinentId === parseInt($this.val()) && obj.Country !== undefined) {

          if(!DropData2.length)
          {
            DropData2 = obj.Country;
          } else {
             $.each(obj.Country, function(index,obj)
             {
               if($.inArray(obj,DropData2)==-1){
                  DropData2.push(obj);
               }
             });
          }

          $.each(DropData2,function(index,obj)
          {
            if(!$("#CountryLeft").has('option').length) {
              $("<option>").val(obj.ContinentId).text(obj.ContinentName).appendTo("#CountryLeft");
            } else {
              if(!$("CountryLeft option:contains("+ obj.ContinentName + ")").length){
          $("<option>").val(obj.ContinentId).text(obj.ContinentName).appendTo("#CountryLeft");
              }
            }
            });
          }

        });
      });

    };

    addRemoveCityDropdown = function() {
    $("#CityLeft").find("option").remove();
    $("#CountryRight option").each(function()
    {
      var $this = $(this);

      $.each(DropData2,function(index,obj)
      {
        if(obj.ContinentId == parseInt($this.val()) && obj.Country !== undefined) {

          if(!DropData3.length)
          {
            DropData3 = obj.Country;
          } else {
             $.each(obj.Country, function(index,obj)
             {
               if($.inArray(obj,DropData3)==-1){
                  DropData3.push(obj);
               }
             });
          }

          $.each(DropData3,function(index,obj)
          {
            if(!$("#CityLeft").has('option').length) {
              $("<option>").val(obj.ContinentId).text(obj.ContinentName).appendTo("#CityLeft");
            } else {
              if(!$("CityLeft option:contains("+ obj.ContinentName + ")").length){
                   $("<option>").val(obj.ContinentId).text(obj.ContinentName).appendTo("#CityLeft");
               }
             }
           });
          }
       });
    });

$("#btnAddCountryRight").click(function(e)
{
  e.preventDefault();
  $("#CountryLeft option:selected").each(function()
  {
    $("#CountryRight").append($('<option>').val($(this).val()).text($(this).text()));
    $(this).remove();
  });
  $("#btnRemoveConuntryRight").removeClass("disabled");
  addRemoveCityDropdown();
});

$("btnRemoveConuntryRight").click(function(e)
{
   e.preventDefault();
   $("#CountryRight option:selected").each(function()
  {
    $("CountryLeft").append($('<option>').val($(this).val()).text($(this).text()));
    $(this).remove();

    var options = $("#CountryLeft option");
    options.detach().sort(function(a,b)
    {
      return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
    });
    options.appendTo("#CountryLeft");

    if(!$("CountryRight").has('option').length) {
      $("#btnRemoveConuntryRight").addClass("disabled");
      $("#CityLeft").find("option").remove();
      $("#CityRight").find("option").remove();
    }
    addRemoveCityDropdown();

    });
  });

 $("btnAddCityRight").click(function(e)
 {
   e.preventDefault();
   $("#CityLeft option:selected").each(function()
   {
     $("#CityLeft").append($('<option>').val($(this).val()).text($(this).text()));
     $(this).remove();

   });

   $("#btnRemoveCityRight").click(function(e)
   {
     e.preventDefault();
     $("#CityRight option:selected").each(function(){
       $("#CityLeft").append($('<option>').val($(this).val()).text($(this).text()));

       var options = $("#CityLeft option");
      options.detach().sort(function(a,b)
      {
        var aValue = $(a).val();
         var bValue =$(b).val();
        return aValue -bValue;

    });
    options.appendTo("#CityLeft");

    if(!$("CityRight").has('option').length)
    {
      $("#btnRemoveCityRight").addClass("disabled");
    }
  });
});


});

};

});
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<body>
<div class="container-fluid container-main">
<div class="form-section">
  <!-- Select Continent Code -->
<div class="row" style="margin-bottom:9px;">
  <div class="col-sm-12">
    <label class="control-label">Continent</label>
  </div>

  <div class="col-sm-5">
    <div class="row">
      <div class="col-sm-12">
        <select class="form-control" id="ContinentLeft" multiple="multiple" style="height:125px">
        </select>
      </div>
    </div>
  </div>


  <div class="col-sm-2" style="margin:35px 0">
    <div class="row">
      <div class="col-sm-12">
          <button type="button" id="btnAddContRight" class="btn btn-default center-block btn-block">Add </button>
      </div>
            <div class="col-sm-12">
          <button type="button" id="btnRemoveContRight" class="btn btn-default center-block btn-block">
         Remove </button>
      </div>
    </div>
    </div>
   <div class="col-sm-5">
    <div class="row">
      <div class="col-sm-12">
        <select class="form-control" id="ContinentRight" multiple="multiple" style="height:125px">
        </select>
      </div>
    </div>
  </div>
  </div>
      <!-- Select Country Code -->

  <div class="row" style="margin-bottom:9px;">
  <div class="col-sm-12">
    <label class="control-label">Country</label>
  </div>

  <div class="col-sm-5">
    <div class="row">
      <div class="col-sm-12">
        <select class="form-control" id="CountryLeft" multiple="multiple" style="height:125px">
        </select>
      </div>
    </div>
  </div>


  <div class="col-sm-2" style="margin:35px 0">
    <div class="row">
      <div class="col-sm-12">
          <button type="button" id="btnAddCountryRight" class="btn btn-default center-block btn-block">Add </button>
      </div>
            <div class="col-sm-12">
          <button type="button" id="btnRemoveConuntryRight" class="btn btn-default center-block btn-block">
         Remove </button>
      </div>
    </div>
    </div>
       <div class="col-sm-5">
    <div class="row">
      <div class="col-sm-12">
        <select class="form-control" id="CountryRight" multiple="multiple" style="height:125px">
        </select>
      </div>
    </div>
  </div>
  </div>

       <!-- Select City Code -->

    <div class="row" style="margin-bottom:9px;">
  <div class="col-sm-12">
    <label class="control-label">City</label>
  </div>

  <div class="col-sm-5">
    <div class="row">
      <div class="col-sm-12">
        <select class="form-control" id="CityLeft" multiple="multiple" style="height:125px">
        </select>
      </div>
    </div>
  </div>


  <div class="col-sm-2" style="margin:35px 0">
    <div class="row">
      <div class="col-sm-12">
          <button type="button" id="btnAddCityRight" class="btn btn-default center-block btn-block">Add </button>
      </div>
            <div class="col-sm-12">
          <button type="button" id="btnRemoveCityRight" class="btn btn-default center-block btn-block">
         Remove </button>
      </div>
    </div>
   </div>
   <div class="col-sm-5">
    <div class="row">
      <div class="col-sm-12">
        <select class="form-control" id="CityRight" multiple="multiple" style="height:125px">
        </select>
      </div>
    </div>
  </div>

  </div>
  </div>
  </div>

    </body>

如果你想在小提琴上工作，我已经创建了一个jsfiddle