从对象创建多个选择选项

Question

我在创建多个选择选项时堆栈

我有一个里面有多个对象的对象，想在之前的选择选项的条件下创建选择选项，我提供js fiddle 以便更好地理解。

我的目标是

首先选择类别----(then)--->选择性别-----(then)--->选择种类---(then)-->然后选择size

从那个对象按这个顺序。

我可以选择性别，它有效，但不是种类和大小。

这是我的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