[英]Show content of 2nd Drop down after 1st Drop down getting selected.
I've managed to get one drop-down list to populate the second drop-down list based on the selection. 我设法得到一个下拉列表,以根据选择填充第二个下拉列表。
HTML here: 此处的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 here: 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>
As you can see, when 'Chest' or 'Biceps' is selected, relative exercises to that body part becomes available to choose in the second drop-down list. 如您所见,当选择“胸部”或“二头肌”时,可以在第二个下拉列表中选择与该身体部位有关的相对运动。 I want to display information specific to that second selection (as you can see I've used the exercise's title in capitals for dummy text), but for some reason everything displays UNTIL a second option is selected.
我想显示特定于第二个选择的信息(如您所见,我已经使用练习标题用大写字母作为伪文本),但是由于某些原因,所有内容都会显示,直到选择了第二个选项。
So for example, I'd choose 'Chest', then before I select any of the two exercises in the second drop-down list, both dummy texts appear. 因此,例如,我选择“胸”,然后在第二个下拉列表中选择两个练习中的任何一个之前,两个虚拟文本都会出现。 They only single out once I choose the exercise.
他们只有在我选择练习后才会选择。 Is there a way to have those dummy texts remain invisible until one of the options is selected?
有没有一种方法可以使那些伪文本在选择其中一个选项之前保持不可见?
Many thanks for your time. 非常感谢您的宝贵时间。
Include $('.exercise_name').hide();
包括
$('.exercise_name').hide();
in first dropdown change event 在第一个下拉更改事件中
$('#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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.