Javascript 使用下拉列表选择填充第二个下拉列表内容

下面的代码使用不同的裤子品牌填充第一个下拉列表：

$.each(pantsBrands, function(i){
    var li = $('<li>')
        .appendTo(pantsList);
    var aaa = $('<a>')
        .text(pantsBrands[i])
        .attr('onclick','askPantStyle()')
        .appendTo(li);
});

我使用警报来检查（这）会返回什么。我本来希望它是第一个选择的文本内容，但当警报框出现时，内容是空的

相关html如下：

<div id='pantsLanding'>
            <p class="lead">Which brand of pants fits you best?</p>
            <p class="lead">
                <!-- Split button -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default">Brand</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul id="dropPants" class="dropdown-menu scrollable-menu" role="menu">
                    </ul>
                </div>
            </p>  
        </div>
        <div id='pantStyleDiv'>
            <p class="lead">What style do you prefer?</p>
            <p class="lead">
                <!-- Split button -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default">Style</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul id="dropPantStyle" class="dropdown-menu scrollable-menu" role="menu">
                    </ul>
                </div>
            </p>  
        </div>

哪种品牌的裤子最适合你

烙印
切换下拉列表



您喜欢什么风格

风格
切换下拉列表

在下面添加了一个快速示例，说明如何解决此问题。引导下拉列表的用法非常具体，因此我使用的是

click

事件，而不是

change

，这是selects的正常事件

此外，我没有添加任何数据属性，因为我没有您的解决方案的完整图片。但我希望你能用它让事情按你所希望的那样运作

您没有提供任何数据，因此我为品牌创建了一个数组，并为样式创建了一个对象。每个品牌在包含样式数组的对象中都有一个属性

var pantsBrands = ['levis', 'lee', 'lindeberg'];
var pantsStyles = { 
        'levis': ['501','502'],
        'lee': ['bruce','kim'],
        'lindeberg': ['lindeberg1','lindeberg2']
};

---

无论如何，下面是一个引导下拉列表填充另一个下拉列表的工作示例：

var pantsBrands=['levis'，'lee'，'lindeberg']；
var pantsStyles={'levis'：['501'，'502']，
‘李’：[‘布鲁斯’、‘金’]，
‘林德伯格’：[‘林德伯格1’，‘林德伯格2’]
};
$。每个（pantsBrands，功能（i）{
$（“#dropPants”）。追加（“
”）；
});
$（'#dropPants'）。在（'click'，'li a'，function（）上{
$（'#dropPantStyle'）.html（''）；
var showStyles=pantstyles[$（this.text（））；
$。每个（显示样式、功能（i）{
$（“#dropPantStyle”）。追加（“
”）；
});   
});

哪种品牌的裤子最适合你

烙印
切换下拉列表



您喜欢什么风格

风格
切换下拉列表



您的相关HTML是什么？引用函数名
.attr（
'onclick'，askPantStyle（）'）
使其成为一个字符串，它不会调用函数（
.attr（
.onclick'，askPantStyle）
）或从函数（
.attr（'onclick'，askPantStyle（））
）获取返回值以将其用作单击处理程序。也就是说，为什么要设置
onclick
事件处理程序，而不是使用jQuery的方法呢？我不知道。。。我刚试过，但似乎效果不太好。当div加载了第一个下拉框时，我得到了警报，askPantStyle div已经可见了。。。
$('#dropPants').on('click', 'li a', function() { ... });

var pantsBrands = ['levis', 'lee', 'lindeberg'];
var pantsStyles = { 
        'levis': ['501','502'],
        'lee': ['bruce','kim'],
        'lindeberg': ['lindeberg1','lindeberg2']
};