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 名を変更するだけで十分な柔軟性を持たせたいと思います。

編集：「悲しい」などの選択が1つ選択された後、誰かが「赤」を選択した場合、「悲しい」という名前のdivが消えないようにすることを忘れました。しかし、「ang」オプションが選択されている場合は、「sad」を消したいです。これ以上混乱しないことを願っています。

4

3 に答える 3

1

すべての div にクラスを追加します

$("select").change(
function()
{
$(".class").hide();
$(".class[id='"+this.value+"']").show();
})
于 2012-06-29T03:28:22.230 に答える
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 に答える
0

すべての div (非表示) にクラスを指定しますclass='foo'

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

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

    });
    });
于 2012-06-29T03:30:10.977 に答える