從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>'; 

如果您解決您的HTML正確關閉</option>，那麼你的代碼工作。

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>