4

私はちょっと行き詰まっています-おそらく問題を解決するのは簡単です。

サイト上のすべての選択要素に使用されるコードを作成したいと考えています。

「オプション」に割り当てられた「ラベル」属性に応じて、この特定の「選択」メニューの「オプション」の他の「ラベル」値と同じクラスを持つ他のすべての「div」要素を非表示にします。

実演してみましょう:

 <select class="sel_depend" id="reg_where_heard" name="where_heard">
    <option value="">Select one…&lt;/option>
    <option value="1">Google</option>
    <option value="2">Yahoo</option>
    <option value="3" label="where_heard_magazine">Magazine</option>
    <option value="4" label="where_heard_other">Other</option>
</select>

<div class="where_heard_magazine dn"><input type="text" name="magazine" id="magazine" value="" /></div>
<div class="where_heard_other dn"><input type="text" name="other" id="other" value="" /></div>

現在、メニューの下の div の「dn」クラスには、単に「display:none」が割り当てられています。

選択したオプションに応じて-値が3の場合-表示するラベルと同じクラスのdivが必要です-値4のオプションを選択すると-他のすべてのdiv(クラス名はすべてのオプションから入力されます)この select 要素) は hide() し、選択された show() のみを表示する必要があります。

特定の「選択」要素のすべての「オプション」要素を配列に配置する方法がよくわかりません。次に、おそらく each() ステートメントを使用してループし、「ラベル」があるかどうかを確認し、ある場合は、その値に一致するクラスで要素を非表示にします。

次に、ループの後、選択した「オプション」の「ラベル」パラメーターの値に一致するクラスを持つ要素を表示できます。

それが理にかなっていることを願っています。

これを達成する方法はありますか？

どうもありがとう。

4

2 に答える 2

2

特定のselectに関連するすべてのdivに、その要素の名前であるクラスを指定します。次に、次のようなことができます。

$('.sel_depend').change(function(){
    var class = $(this).attr('name');
    $('.' + class).hide();
    var divToShowClass = $(this).find(':selected').attr('label');
    $('.' + divtoShowClass).show();

});
于 2010-07-29T19:12:43.387 に答える
0 
  $('.sel_depend').change(function() {
    var optionWithLabels = $('.sel_depend').children("option[label]");
    if($("option:selected", this).attr('label')) {
        optionWithLabels.each(function(){
            $('.' + $(this).attr('label')).hide();
        });
        $('.' + $("option:selected", this).attr('label')).show();
    }
  });
于 2010-07-29T19:31:12.397 に答える