使用下拉列表选择填充第二个下拉列表内容
Use dropdown list selection to populate second dropdown list contents
下面的代码用不同的裤子品牌填充第一个下拉列表:
$.each(pantsBrands, function(i){
var li = $('<li>')
.appendTo(pantsList);
var aaa = $('<a>')
.text(pantsBrands[i])
.attr('onclick','askPantStyle()')
.appendTo(li);
});
在下一段代码中,我打算以某种方式使用上面的选择来填充第二个下拉框中的内容,该下拉框由与第一个选择的品牌相关的样式组成。
var askPantStyle = function(){
$('#pantStyleDiv').slideDown();
alert($(this).text());
}
我使用警报来检查(this)将返回什么。我希望它是第一个选择的文本内容,但是当警告框出现时,内容是空的。
相关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
,这是选择的正常事件。
$('#dropPants').on('click', 'li a', function() { ... });
我也没有添加任何数据属性,因为我没有你的解决方案的全图。但我希望你能用这个让事情如你所愿。
您没有提供任何数据,所以我为品牌创建了数组,为样式创建了对象。每个品牌在包含样式数组的对象中都有一个属性。
var pantsBrands = ['levis', 'lee', 'lindeberg'];
var pantsStyles = {
'levis': ['501','502'],
'lee': ['bruce','kim'],
'lindeberg': ['lindeberg1','lindeberg2']
};
无论如何,下面是一个Bootstrap下拉菜单填充另一个下拉菜单的工作示例:
var pantsBrands = ['levis','lee','lindeberg'];
var pantsStyles = { 'levis': ['501','502'],
'lee': ['bruce','kim'],
'lindeberg': ['lindeberg1','lindeberg2']
};
$.each(pantsBrands, function(i) {
$('#dropPants').append('<li><a href="#">'+pantsBrands[i]+'</a></li>');
});
$('#dropPants').on('click', 'li a', function() {
$('#dropPantStyle').html('');
var showStyles = pantsStyles[$(this).text()];
$.each(showStyles, function(i) {
$('#dropPantStyle').append('<li><a href="#">'+showStyles[i]+'</a></li>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<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>
相关文章:
- 如果未选择第一个下拉列表,则禁用第二个下拉列表
- 显示基于第一个下拉列表的第二个下拉列表不起作用
- 如何在第二个下拉列表中更改设置的默认值
- 如何从php中第一个动态生成的第二个下拉列表将数据存储到数据库中
- 隐藏第二个下拉列表,直到在第一个下拉列表中做出选择
- 根据 Wordpress 页面中的第一个下拉列表填充第二个下拉列表
- 获取所选项目的值,并在第二个下拉列表中更改列表
- 下拉列表更改事件直到第二个实例才触发
- 剑道UI [下拉列表] - 多个元素中的冲突
- 如何在更改第一个下拉列表后从数据库加载第二个下拉列表
- 根据第二个和第一个下拉列表选择填充第三个下拉列表
- 基于第一个 - JQuery 对话框加载第二个下拉列表
- 下拉列表 在第二个选择第一个选择时不会显示:无;
- 如何根据从第一个下拉列表自动更改的第二个下拉列表更改第二个文本框值
- 根据第一个下拉列表结果填充第二个下拉列表
- 基于第一个下拉列表的动态第二个下拉列表
- 在javascript/php.html中选择第一个下拉列表后,更新第二个下拉列表
- 代码点火器下拉顺序,第一个下拉列表中选择的值musn'第二天中午
- 级联下拉的第二个下拉没有填充
- HTML 连接的下拉列表(多个),数字作为值