3个选择框的链式下拉列表

Question

我想为selectbox创建一个链式下拉列表。

HTML：

<select class="product" id="select_1" name="product">
  <option selected="selected" value=""> Choose Category </option>
  <option value="men"> Mens Suits </option>
  <option value="women"> Womens Suits </option>
  <option value="children"> Children Suits </option>
</select>

<select class="color" id="select_2" name="color">
  <option selected="selected" value=""> Choose Color </option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
</select>

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option value="36">36</option>
  <option value="38">38</option>
  <option value="40">40</option>
  <!-- Womens Sizes Below -->
  <option value="30">30</option>
  <option value="29">29</option>
  <option value="28">28</option>
  <!-- Children Sizes Below -->
  <option value="12">12</option>
  <option value="11">11</option>
  <option value="10">10</option>
</select>

JS：

$(document).ready(function() {
    var sizes = {
        men: [36,38,40],
        women: [30,29,28],
        children: [12,11,10]
    }
    $('.product').change(function() {
        var value = $(this).val();
        addToList(sizes[value]);
    });
    function addToList(sizes) {
        removeOptions();
        for (var i in sizes) {
            var option = '<option value="'+i+'">'+sizes[i]+'</option>';
            $('.size').append(option)
        }
    }

    function removeOptions() {
         $('.size option').each(function(){
            if ($(this).val().length > 0){
                $(this).remove();
            }
        }); 
    }
});

我想要的是什么：

有三个选择框，例如选择框1 ，选择框2 和选择框3 。当我点击选择框1然后选择框2值将根据选择框1中选择的值更改，当我单击选择框2然后选择框3值将根据选择框2中选择的值更改。

Problem

我想要三个链式下拉而不是两个。例如：国家，州和城市..当一个国家选择时，根据国家和城市的状态变化状态变化。

我可以创建两个选择框而不是三个。请告诉我我缺少的地方。

以上编码是例如。实际上我想要它用于国家，州和城市的选择。

希望你理解我的问题。