JSONからドロップダウンリストを作成し、空白のオプション項目を取得する

Question

JSONオブジェクトから2つの選択入力を作成するときに、ドロップダウンリストに空白のオプションが表示されます。私のコードは以下の通りです：

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

コードのデモ： https://jsfiddle.net/vee4c1op/

Answer 1

あなたが生成するHTMLが無効であるため、あなたの問題があります。閉じるoption要素を<option />と追加するときは</option>レンダラーは、何をしようとしているのかわからないので、新しい空白option要素を追加しています。例えば

、この：

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

は次のようになります。

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

あなたが適切</option>を閉じるために、あなたのHTMLを修正する場合は、あなたのコードが動作します。

Update fiddle

Answer 2

私はちょうどあなたのスクリプトやHTMLコードを変更しました。ここに変更されたコードがあります。それがあなたを助けることを願っています。

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

ここにHTMLコードが変更されています。

<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>