Question

我在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名称。

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

Answer 1

为所有div

添加一个类

$("select").change(
function()
{
$(".class").hide();
$(".class[id='"+this.value+"']").show();
})

Answer 2

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

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

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

    });
    });

Answer 3

您还可以使用toggle：

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) 
       })

   });

});

Jquery：根据选择表单选项的值显示隐藏的div

3 个答案: