Создание несколько Выбора параметров из объекта

Question

Im стека на создании несколько выбора опций

У меня есть объект с несколькими объектами внутри и хочу создать выбор параметров в условиях предыдущего выбора опции, я обеспечиваю js fiddle для лучшего понимания.

мой Objectif является

первой выберите категорию ---- (тогда) ---> выберите секс ----- (тогда) ---> выберите тип --- (тогда) - -> затем выберите размер

от этого заказа от этого объекта.

Я мог бы сделать выбор пола, и он работает, но не добра и размера.

это мой HTML

 <form name="myform"> 
    <div> 
     <select name="category_group" id="category_group" > 
       <option value="0">choose category</option> 
       <option value='401' > clothes </option> 
       <option value='403' > shoes </option> 
     </select> 
</div> 
<br> 
<div> 
     <select id="clothing_sex" name="clothing_sex" onChange="showclothesKind(this.value,this.form.clothing_kind)"> 
       <option value="0">choose Type»</option> 
     </select> 
     <select id="clothing_kind" name="clothing_kind"> 
       <option value="0">choose clothes</option> 
     </select> 
     <select id="clothing_size" name="clothing_size"> 
      <option value="0">choose size</option> 
     </select> 
    </div> 
    </form> 

и JS в скрипку.

очень ценю вашу помощь.

Answer 1

Это было весело провести время. Спасибо за публикацию. Я использовал следующие:

var optionTemplate = "<option class='newOption'>sampleText</option>"; 

$(document).ready(function() { 
    var removeFromNextSelects = function(firstSelector) { 
     var selNum = sels.indexOf(firstSelector); 
     for (var i = selNum; i < sels.length; i++) 
     { 
      $(sels[i]).find('.option').remove(); 
     } 
    }; 

    var populateNextSelect = function(neededObject, targetSelector) { 
     removeFromNextSelects(targetSelector); 
     for (var key in neededObject) 
     { 
      var name; 
      neededObject[key].name ? name = neededObject[key].name : name = neededObject[key]; 
      $(targetSelector).append(optionTemplate); 
      $('.newOption').val(key).html(name).removeClass('newOption').addClass('option'); 
     } 
    }; 

    var obj1 = {}, obj2 = {}, obj3 = {}; 
    var sels = ["#clothing_sex", "#clothing_kind", "#clothing_size"]; 

    $('#category_group').change(function() { 
     if ($(this).val() == 0) 
     { 
      removeFromNextSelects(sels[0]); 
      return; 
     } 
     obj1 = {}; 
     var selection = $(this).val(); 
     obj1 = clothes[selection]; 
     populateNextSelect(obj1, sels[0]); 
    }); 

    $('#clothing_sex').change(function() { 
     if ($(this).val() == 0) 
     { 
      removeFromNextSelects(sels[1]); 
      return; 
     } 
     obj2 = {}; 
     var selection = $(this).val(); 
     obj2 = obj1[selection].types; 
     populateNextSelect(obj2, sels[1]); 
    }); 

    $('#clothing_kind').change(function() { 
     if ($(this).val() == 0) 
     { 
      removeFromNextSelects(sels[2]); 
      return; 
     } 
     obj3 = {}; 
     var selection = $(this).val(); 
     var arr = obj2[selection].sizes; 
     for (var i = 0; i < arr.length; i++) 
     { 
      obj3[Object.keys(arr[i])[0]] = arr[i][Object.keys(arr[i])[0]]; 
     } 
     populateNextSelect(obj3, sels[2]); 
    }); 
}); 

Вот fiddle