Javascript 从对象创建多个选择选项

创建多个选择选项时的Im堆栈

我有一个内有多个对象的对象，希望在前一个选择选项的条件下创建选择选项，以便更好地理解

我的目标是

首先选择类别--然后-->选择性别--然后-->选择种类--然后->然后选择大小

按这个顺序从那个物体开始

我可以选择性别，但不能选择种类和尺寸

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

---

非常感谢您的帮助。

这是一种很有趣的游戏。谢谢你的发帖。我使用了以下方法：

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

---

这是您靠近它的

外观，但它重复选定的值。如果您选择了其他内容，则前面的值将保持选中状态。您是对的，非常抱歉。我已经更新了代码和提琴。如果需要的话，我想了解一下吗？sampleTextYeah，这是我插入并修改的模板，以便在下一个下拉列表中创建每个选项。你也可以通过在html中创建一个隐藏的元素，比如a和type=text/template，然后用jQuery的.html函数抓取它，但我发现这种方法更简单。对不起，我还有其他话要说，看看你的小提琴，选择类型，让我们说女人，然后在其中再次选择无。不选择它将显示错误obj1[选择]没有定义。在其他选择上也会发生同样的事情。请问我该怎么修？