根据选中的下拉框更改div

尝试仅显示与表单中选定的下拉框匹配的

。

表单使用Form类生成，选项位于数据库中的表（ race ， class ）中。 最后看起来像这样：

 
 
 
 
 Character Name:  
 
 Gender:  Female Male  
 
 Character Race:  Goblin Human Undead  
 
 Character Class:  Warrior Wizard  
 
  
 
 
  

我的控制器调用Avatar，CharacterClass，Race类。

我的avatar表有一些列，用于存储到race.id和class.id table.id_column的ID。

 # Get all the avatars in the `avatars` table. $avatars=$avatar_obj->getAllAvatars(); foreach($avatars as $avatar) { # Get the image information from the database, and set them to data members. $avatar_obj->getThisImage($avatar->image_id); # Set the Image object to a variable. $image_obj=$avatar_obj->getImageObj(); # Set the image file name to a variable. $image_file_name=$image_obj->getFileName(); # Get the class info from the database and set the data members. $class_obj->getThisCharacterClass($avatar->class_id); # Get the race info from the database and set the data members. $race_obj->getThisRace($avatar->race_id); echo '
', '
', 'getTitle().'" />', '
'; echo $race_obj->getDescription().'
'; echo $class_obj->getDescription(); echo '
'; } 

这显示了一堆

：

 
 
 Goblin description.
 Warrior Description 
 
 
 Goblin description.
 Wizard Description 
 
 
 Human description.
 Warrior Description 
 
 
 Human description.
 Wizard Description 
 
 
 Undead description.
 Warrior Description 
 
 
 Undead description.
 Wizard Description  

（还有更多）

我被困在这一点上。 我不知道如何弄清楚jQuery隐藏/显示正确的

。

Answer 1

无论如何都写得不好： http ： //jsfiddle.net/dz5gh7wo/2/

（ 更新 ：稍微可维护的例子http://jsfiddle.net/dz5gh7wo/7/ ）

您要做的是添加一个在输入字段更改时触发的on change事件侦听器。

 $('#character_race, #character_gender, #character_class').on('change', buildCharacter); 

在这里，我以非常草率的方式将它添加到您的所有领域，但这仅用于教育目的。 它调用buildCharacter函数。

然后我们定义该函数。

 var buildCharacter = function() { var charRace = $('#character_race :selected').text(), charGender = $('#character_gender :selected').text(), charClass = $('#character_class :selected').text(), cssStr = charGender+'-'+charRace+'-'+charClass; $('.class-info').hide(); $('.'+cssStr.toLowerCase()).show(); }; 

您将希望使用一些CSS隐藏所有未使用的类div

 .class-info { display: none } 

最后在页面加载时调用构建字符

buildCharacter();

您将需要在每个角色显示上安排课程，以便您可以随意显示和隐藏它们。

female-goblin-warrior