选择第一个下拉菜单后显示第二个下拉菜单的内容
Show content of 2nd Drop down after 1st Drop down getting selected.
我已经设法获得了一个下拉列表,以根据选择填充第二个下拉列表。
此处为HTML:
<select size="1" id="BodyPart" title="" name="BodyPart">
<option value="">-Select Body Part-</option>
<option value="chest">Chest</option>
<option value="biceps">Biceps</option>
</select>
<div class="container">
<div class="chest">
<select class="exercise_select">
<option value ="__select__">SELECT</option>
<option value ="chestpress">Chest Press</option>
<option value ="inclinechestpress">Incline Chest Press</option>
</select>
<div class="chest">
<div class="chestpress exercise_name">
CHEST PRESS
</div>
<div class="inclinechestpress exercise_name">
INCLINE CHEST PRESS
</div>
</div>
</div>
<div class="biceps">
<select class="exercise_select">
<option value ="__select__">SELECT</option>
<option value="bicepcurls">Bicep Curls</option>
<option value="hammercurls">Hammer Curls</option>
</select>
<div class="biceps">
<div class="bicepcurls exercise_name">
BICEP CURLS
</div>
<div class="hammercurls exercise_name">
HAMMER CURLS
</div>
</div>
</div>
此处为JavaScript:
<Script language='JavaScript'>
$(document).ready(function() {
var elements = $('div.container').children().hide();
$('#BodyPart').change(function() {
elements.hide();
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
});
$('.exercise_select').change(function(){
console.log(123);
$('.exercise_name').hide();
var subele=$('.exercise_name');
subele.filter('.'+$(this).val()).show();
});
});
</script>
正如你所看到的,当选择"胸部"或"二头肌"时,可以在第二个下拉列表中选择该身体部位的相对运动。我想显示特定于第二个选项的信息(正如你所看到的,我已经用大写的练习标题作为伪文本),但出于某种原因,在选择第二个选择之前,所有内容都会显示出来。
例如,我会选择"胸部",然后在第二个下拉列表中选择两个练习中的任何一个之前,两个伪文本都会出现。他们只有在我选择锻炼时才会挑出。有没有办法让这些伪文本在选择其中一个选项之前保持不可见?
非常感谢您抽出时间。
在第一个下拉更改事件中包含$('.exercise_name').hide();
$('#BodyPart').change(function() {
elements.hide();
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
$('.exercise_name').hide();
});
演示
相关文章:
- 第二个下拉菜单元素上的重复下拉Javascript效果
- 根据另一个下拉菜单中的选择更改第二个下拉菜单的值
- 第一个下拉菜单可自动更改第二个下拉菜单的选项
- 下拉菜单动态填充第二个下拉菜单
- 如何从 php 生成的
- 下拉菜单生成第二个 li 菜单,其中包含 javascript 或 jquery
- 第二个下拉菜单没有立即出现
- JQuery下拉菜单三个层次
- 在jQuery下拉菜单中获取第二个值
- 悬停第二个菜单后,第一个下拉菜单没有关闭
- 引导下拉菜单隐藏在第二个面板体
- jQuery下拉菜单第二次不工作
- 启用第二个下拉菜单一旦某些东西被选中在下拉菜单1
- 基于第一个下拉菜单,禁用第二个下拉菜单
- 级联下拉的第二个下拉没有填充
- 第二个下拉菜单在选择后消失
- 第一个下拉菜单选择第二个和第三个下拉菜单
- 融合表谷歌地图第二个Javascript下拉菜单不工作
- 从第二个下拉菜单中获取描述
- 如何在第一个菜单的基础上刷新第二个隐藏的下拉菜单
- 选择第一个下拉菜单后显示第二个下拉菜单的内容