我正在尝试根据两个下拉列表中的选择显示内容(文本,图像,视频)。 事实证明,这很棘手,因为我的第二个下拉列表根据第一个下拉列表进行更新。 到目前为止,这是我的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”文本都将显示。 任何人都可以就我如何进行这项工作提供一些帮助或指导吗?

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

===============>>#1 票数: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();
        });
   });

  ask by AKJ9 translate from so

未解决问题?本站智能推荐:

3回复

PHP + Jquery根据两个下拉列表更改文本框的值

我尝试根据2下拉列表更新文本框值。 1个下拉菜单包含price1,其他下拉菜单包含price 2,现在我希望当用户从两个下拉菜单中选择价格时,文本框显示为“ price1 + price2 = total ”,如何在单个文本框值中同时包含两个值? 我的价格来自数据库。 这是FIDDLE
4回复

使用数据库信息从两个下拉列表中拉出两个选项

我确定标题模糊不清,所以让我尝试解释我在做什么。 假设我有两种形式的下拉菜单,其中包含数据库抽取的信息,如下所示: 下拉菜单1 ->选项1 ->选项2 下拉菜单2 ->选项3 ->选项4 下拉菜单3
1回复

根据上一个下拉列表,上一个下拉列表不起作用

我有一个基于前一个下拉列表的列表。 他们根据上一个选择的内容提取数据,并填充下一个下拉菜单。 我正在使用相同的代码,但是由于某种原因,它在最后一个代码上不起作用。 这是JavaScript: 这是HTML: 这是用于获取属的loadGenus.php: 这是用于获取
1回复

如何通过从另一个下拉列表中选择值来填充下拉列表

我有两个第一个说国家 第一张表中的country_id是第二张表中的国家,所以现在我想要两个下拉菜单,一个用于国家,另一个用于州。 如果未选择第一个下拉菜单中的项目,则第二个下拉菜单值必须根据第一个下拉菜单中的所选项目进行更改,并且必须禁用第二个下拉菜单
1回复

基于另一个下拉列表的下拉列表,选择选项来自数据库

抱歉,如果以前没有讨论过,但是对我来说,所有这些都不起作用。 我有5个下拉菜单,分别是“品牌”,“型号”,“颜色”,“引擎号”和“底盘编号”。我的问题是我应该怎么做才能使模型的下拉列表基于所选的“品牌”下拉列表,例如,如果用户选择了“本田”根据我在数据库中发布的图像,本田的BrandID为1,
2回复

基于第一个下拉列表的动态第二个下拉列表

好的,所以我在问之前进行了研究,但是他们似乎使用了诸如cloning(?)之类的复杂东西,我真正需要的很简单,我做不到,或者不知道是否可以在php中做。 我需要显示第二个下拉列表,具体取决于第一个下拉列表中当前选择的内容(提交之前)。 这是我的第一个下拉列表: 然后,例如,我
1回复

如何从开始日期算起几周到最后一个下拉列表?

如何从开始日期算起几周到最后一个下拉列表? 假设我想得到这个月内的所有星期。 但是,接下来如何将它们填充到下拉列表中呢? 到目前为止,我已经尝试过了: 上面的代码将为我提供一个月中完整周的开始日期和结束日期,其中星期日为一周的第一天,星期六为一周的最后一天。 但是,我想根据开
1回复

如何确定与多个数组名称相同的选择中更改了哪个下拉列表

我在表中的行中有许多下拉列表(如数十个),它们具有相同的名称和方括号(objects []),以便在发布时可以将它们的值作为数组使用。 问题当我更改下拉列表的值时,是否可以使用jquery / js唯一标识从该组下拉列表中更改哪个下拉列表的值? 即获取下拉列表的索引。 用例是在同
1回复

在第一个下拉菜单被选中后显示第二个下拉菜单的内容。

我设法得到一个下拉列表,以根据选择填充第二个下拉列表。 此处的HTML: JavaScript在这里: 如您所见,当选择“胸部”或“二头肌”时,可以在第二个下拉列表中选择与该身体部位有关的相对运动。 我想显示特定于第二个选择的信息(如您所见,我已经使用练习标题用大写字母作
2回复

在php的下拉菜单中创建项目列表

我一直在尝试实现一个下拉菜单,如果做出选择,它将在下拉菜单上方列出所选项目。 我正在使用下面的网站 http://odyniec.net/articles/multiple-select-fields/ 我正在使用的特定部分在“ Fancy Javascript Method”