0

我在 Jquery 上很糟糕，当我尝试为我的网站制作这段代码时几乎无法理解它。

我的目标是在表单中选择的值等于该 Div 标签的名称时显示Div标签。

这是我所拥有的：

<form>
    <select name="SELECT_Mood_30">
        <option value="hap">Happy</option>
        <option value="sad">Sadness</option>
        <option value="ang">Angry</option>
        <option value="gru">Grumpy</option>
    </select>

    <select name="SELECT_hair_75">
        <option value="red">red</option>
        <option value="bla">black</option>
        <option value="blo">blonde</option>
        <option value="bru">brunette</option>
    </select>
</form>

现在想象一下，可能有 40、50 甚至 100 种不同的选项。每个都有一个隐藏的 div，如下所示。在选择具有与这些 div 之一的名称匹配的值的选项后，我希望 div 出现。取消选择它时，我希望它消失。

<div id="ang" style="display:none;">
    SO YOU'RE ANGRY HUH?!
</div>
<div id="sad" style="display:none;">
    How can I make you feel better?
</div>
<div id="bla" style="display:none;">
    Black hair is really cool
</div>
<div id="red" style="display:none;">
    Red hair is nice!
</div>

在 Jquery 中可以做到这一点吗？可能让它查找选定的值，然后取消隐藏命名的 div。表单的名称无关紧要，它可以在心情表单中查找红色，如果出现，它无论如何都可以显示它。如果命名的 div 不存在，那么什么都不会发生并且一切都很好？（没有错误信息或任何东西）

我在网上找到了一些工作的，但他们似乎都需要将每个选项放在 Jquery 中，这是我不想要的。我希望它足够灵活，您只需更改选项值和 div 名称。

编辑：我忘了说如果选择了一个选项，例如“sad”，然后有人选择“red”，我不希望名为“sad”的 div 消失。但是如果选择了“ang”选项，我希望“悲伤”消失。我希望这不会使事情更加混乱。

4

3 回答 3

1

为所有 div 添加一个类

$("select").change(
function()
{
$(".class").hide();
$(".class[id='"+this.value+"']").show();
})
于 2012-06-29T03:28:22.230 回答
0

给你所有的 div（隐藏）一个类说class='foo'

 $(document).ready(function(){
    $('select').change(function(){
    $('.foo').hide();

    $("div[name='"+$(this).val()+"']").show();

    });
    });
于 2012-06-29T03:30:10.977 回答
0

您还可以使用切换：

jQuery(function() {

   $('select').change(function() {
       // I've use .message to distinguish the divs to show or hide

       var value = $(this).val();
       $('div.message').each(function() { 
              $(this).toggle($(this).attr('id') == value) 
       })

   });

});
于 2012-06-29T05:29:48.507 回答