Erstellen Dropdown-Liste von JSON, leere Option Elemente

Question

Ich bekomme leere Optionen in der Dropdown-Liste beim Erstellen von 2 wählen Eingabe von einem JSON-Objekt. Mein Code ist wie folgt:

<form> 
    <div class="form-group"> 
     <label for="countries">Countries: </label> 
     <select class="select2" id="countries" name="countries" multiple="multiple" style="width: 50%"> 
      <option></option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <label for="cities">Cities: </label> 
     <select class="select2" id="cities" name="cities" multiple="multiple" style="width: 50%"> 
     </select> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> 

var selectData = [{ 
    "id": "1", 
    "name": "United States", 
    "city": [{ 
     "country_id": "1", 
     "id": "1", 
     "name": "New York City" 
    }, { 
     "country_id": "1", 
     "id": "2", 
     "name": "Los Angeles" 
    }, { 
     "country_id": "1", 
     "id": "3", 
     "name": "Chicago" 
    }, { 
     "country_id": "1", 
     "id": "4", 
     "name": "Hustan" 
    }] 
}, { 
    "id": "2", 
    "name": "India", 
    "city": [{ 
     "country_id": "2", 
     "id": "5", 
     "name": "Mumbai" 
    }, { 
     "country_id": "2", 
     "id": "6", 
     "name": "Delhi" 
    }, { 
     "country_id": "2", 
     "id": "7", 
     "name": "Bangalore" 
    }, { 
     "country_id": "2", 
     "id": "8", 
     "name": "Chennai" 
    }] 
}, { 
    "id": "3", 
    "name": "China", 
    "city": [{ 
     "country_id": "3", 
     "id": "9", 
     "name": "Guangzhou" 
    }, { 
     "country_id": "3", 
     "id": "10", 
     "name": "Shanghai" 
    }, { 
     "country_id": "3", 
     "id": "11", 
     "name": "Chongqing" 
    }, { 
     "country_id": "3", 
     "id": "12", 
     "name": "Beijing" 
    }] 
}]; 

$("document").ready(function() { 
    function getCountryId() { 
     return $("#countries").val(); 
    } 

    var $select1 = $("#countries"), 
     $select2 = $("#cities"); 

    var countries = '<option value="0">All<option/>'; 
    $.each(selectData, function(i, country) { 
     countries += '<option value="' + country.id + '">' + country.name + '<option/>'; 
    }); 
    $select1.html(countries); 

    function createCities(id = null) { 
     if (!id || id == 0) { 
      var cities = '<option value="0">All<option/>'; 
      $.each(selectData, function(i, country) { 
       $.each(country.city, function(i, city) { 
        cities += '<option value="' + city.id + '">' + city.name + '<option/>'; 
       }); 
      }); 
      $select2.html(cities); 
     } else { 
      var cities = '<option value="0">All<option/>'; 
      if ($.isArray(id)) { 
       $.each(id, function(i, id) { 
        $.each(selectData, function(i, country) { 
         if (country.id === id) { 
          $.each(country.city, function(i, city) { 
           cities += '<option value="' + city.id + '">' + city.name + '<option/>'; 
          }); 
         } 
        }); 
       }) 
      } else { 
       $.each(selectData, function(i, country) { 
        if (country.id === id) { 
         $.each(country.city, function(i, city) { 
          cities += '<option value="' + city.id + '">' + city.name + '<option/>'; 
         }); 
        } 
       }); 
      } 
      $select2.html(cities); 
     } 
    } 

    createCities(); 

    $select1.on('change', function() { 
     var id = getCountryId(); 
     createCities(id); 
    }); 

    $(".select2").select2(); 
}); 

-Code Demo: https://jsfiddle.net/vee4c1op/

Answer 1

Ihr Problem ist, weil die HTML Sie erzeugen ungültig ist. Sie fügen abschließende option Elemente mit hinzu, wenn es </option> sein sollte Der Renderer fügt dann ein neues leeres option Element hinzu, da es nicht sicher ist, was Sie versuchen zu tun.

Zum Beispiel diese:

var countries = '<option value="0">All<option/>'; 

Sollte sein:

var countries = '<option value="0">All</option>'; 

Wenn Sie Ihre HTML-Korrektur funktioniert die </option> richtig zu schließen, geben Sie Ihren Code.

Update fiddle

Answer 2

Ich habe das Skript und HTML-Code nur modifiziert. Hier ist der modifizierte Code. Ich hoffe es hilft dir.

var selectData = [{ 
     "id": "1", 
     "name": "United States", 
     "city": [{ 
      "country_id": "1", 
      "id": "1", 
      "name": "New York City" 
     }, { 
      "country_id": "1", 
      "id": "2", 
      "name": "Los Angeles" 
     }, { 
      "country_id": "1", 
      "id": "3", 
      "name": "Chicago" 
     }, { 
      "country_id": "1", 
      "id": "4", 
      "name": "Hustan" 
     }] 
    }, { 
     "id": "2", 
     "name": "India", 
     "city": [{ 
      "country_id": "2", 
      "id": "5", 
      "name": "Mumbai" 
     }, { 
      "country_id": "2", 
      "id": "6", 
      "name": "Delhi" 
     }, { 
      "country_id": "2", 
      "id": "7", 
      "name": "Bangalore" 
     }, { 
      "country_id": "2", 
      "id": "8", 
      "name": "Chennai" 
     }] 
    }, { 
     "id": "3", 
     "name": "China", 
     "city": [{ 
      "country_id": "3", 
      "id": "9", 
      "name": "Guangzhou" 
     }, { 
      "country_id": "3", 
      "id": "10", 
      "name": "Shanghai" 
     }, { 
      "country_id": "3", 
      "id": "11", 
      "name": "Chongqing" 
     }, { 
      "country_id": "3", 
      "id": "12", 
      "name": "Beijing" 
     }] 
    }]; 

    $("document").ready(function() {   
     getCountryId(); 
     var $select1 = $("#countries"), 
      $select2 = $("#cities"); 

     var countries = '<option value="0">All</option>'; 
     $.each(selectData, function (i, country) { 
      countries += '<option value="' + country.id + '">' + country.name + '</option>'; 
     }); 
     $select1.html(countries); 

     $('.select1').change(function() { 
      var id = getCountryId(); 
      createCities(id); 
     }); 

     //createCities(0);   

     //$(".select2").select2(); 
    }); 

    function createCities(id) { 
     if (!id || id == 0) { 
      var cities = '<option value="0">All</option>'; 
      $.each(selectData, function (i, country) { 
       $.each(country.city, function (i, city) { 
        cities += '<option value="' + city.id + '">' + city.name + '</option>'; 
       }); 
      }); 
      $('#cities').html(cities); 
     } else { 
      var cities = '<option value="0">All</option>'; 
      if (id!=null) { 
       $.each(id, function (i, id) { 
        $.each(selectData, function (i, country) { 
         if (country.id === id) { 
          $.each(country.city, function (i, city) { 
           cities += '<option value="' + city.id + '">' + city.name + '</option>'; 
          }); 
         } 
        }); 
       }) 
      } else { 
       $.each(selectData, function (i, country) { 
        if (country.id === id) { 
         $.each(country.city, function (i, city) { 
          cities += '<option value="' + city.id + '">' + city.name + '</option>'; 
         }); 
        } 
       }); 
      } 
      $('#cities').html(cities); 
     } 
    } 

    function getCountryId() { 
     //alert($("#countries").val()); 
     return $("#countries").val(); 
    } 

Hier ist HTML-Code geändert.

<form> 
    <div class="form-group"> 
     <label for="countries">Countries: </label> 
     <select class="select1" id="countries" name="countries" multiple="multiple" style="width: 50%"> 
      <option></option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <label for="cities">Cities: </label> 
     <select class="select2" id="cities" name="cities" multiple="multiple" style="width: 50%"> 
     </select> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form>