[英]Showing specific content from a combination of two drop-down lists
我正在尝试根据两个下拉列表中的选择显示内容(文本,图像,视频)。 事实证明,这很棘手,因为我的第二个下拉列表根据第一个下拉列表进行更新。 到目前为止,这是我的HTML代码:
<div class="margins1">
<h2>Main Body Part</h2>
<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>
<option value ="chestpress">Chest Press</option>
<option value ="inclinechestpress">Incline Chest Press</option>
</select>
</div>
<div class="chest chestpress">
CHEST PRESS
</div>
<div class="chest inclinechestpress">
INCLINE CHEST PRESS
</div>
<div class="biceps">
<select>
<option value="bicepcurls">Bicep Curls</option>
<option value="hammercurls">Hammer Curls</option>
</select>
<div class="bicepcurls">
BICEP CURLS
</div>
<div class="hammercurls">
HAMMER CURLS
</div>
</div>
</div>
这是我在HTML上方的JavaScript:
<script>
$(document).ready(function() {
$('#BodyPart').bind('change', function() {
var elements = $('div.container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
</script>
如您所见,如果用户单击“胸部”,则会为他们提供另一个包含两个胸部锻炼的下拉菜单。 “二头肌”使用相同的逻辑。 但是,如果用户单击身体部位类别的特定锻炼,则尝试显示一段文本(锻炼名称)。 问题是,无论用户选择了哪种锻炼方式,两条文本都显示出来。
例如,如果用户选择身体部位“二头肌”,则无论在第二个下拉菜单中选择了什么运动,“ BICEP CURLS”和“ HAMMER CURLS”文本都将显示。 任何人都可以就我如何进行这项工作提供一些帮助或指导吗?
非常感谢您的时间和支持。
您的HTML:
<div class="margins1">
<h2>Main Body Part</h2>
<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="excercise_select">
<option value ="__select__">SELECT</option>
<option value ="chestpress">Chest Press</option>
<option value ="inclinechestpress">Incline Chest Press</option>
</select>
</div>
<div class="chest">
<div class="chestpress exercise_name">
CHEST PRESS
</div>
<div class="inclinechestpress exercise_name">
INCLINE CHEST PRESS
</div>
</div>
<div class="biceps">
<select class="excercise_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>
您的js:
$(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
}
});
$('.excercise_select').change(function(){
console.log(123);
$('.exercise_name').hide();
var subele=$('.exercise_name');
subele.filter('.'+$(this).val()).show();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.