显示两个下拉列表组合中的特定内容

时间:2014-04-20 16:58:05

标签: javascript php jquery html drop-down-menu

我正在尝试根据两个下拉列表中的选项显示内容(文本,图像,视频)。事实证明这非常棘手,因为我的第二个下拉列表会根据第一个下拉列表进行更新。这是我目前的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>

正如您所看到的,如果用户点击“胸部”,他们会看到另一个包含两个胸部练习的下拉菜单。同样的逻辑用于“二头肌”。但是,如果用户点击了身体部位类别的特定练习,我会尝试显示一段文字(练习名称)。问题是,无论用户选择了什么样的练习,两段文字都显示出来。

例如,如果用户选择了身体部位&#39; Biceps&#39;两者都是&#39; BICEP CURLS&#39;和&#39; HAMMER CURLS&#39;无论在第二个下拉菜单中选择了什么练习,都会显示文本。是否有人能够提供一些帮助或指导,以便我如何使这项工作?

非常感谢您的时间和支持。

1 个答案:

答案 0 :(得分:0)

您的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();
        });
   });