0

ドロップダウンがあります

<select name="claimsform">
  <option value="lp_claims"> lp_claims</option>
  <option value="gap_claims">gap_claims</option>
  <option value="home_claims">home_claims</option>
</select>

ドロップダウンで選択した内容に応じて、jquery を使用して以下の div の css 表示をブロックするように設定したい

したがって、「home_claims」を選択すると、.home_claims を含む div で表示プロパティがブロックに設定されます。

<div class="lp_claims">
<p> <strong>LP Claims heading</strong></p>
</div>

<div class="gap_claims">
<p> <strong>GAP Heading</strong></p>
</div>

<div class="home_claims">
<p><strong>Home heading</strong></p>
</div>

そして私の現在のcssは

.lp_claims, .gap_claims, .home_claims{ display:none;}

みんなありがとう。

4

3 に答える 3

4

これを試して

  $('select').on('change', function() {
    var val = $(this).val();
    $('div').hide();
    $('.' + val).css('display', 'block');
}).change();

デモをチェック

于 2012-09-27T23:58:14.243 に答える
1

これを試して

$('select[name=claimsform]').on('change', function(){
var selected = $(this).val();
   $('.'+selected +'').css('display','block');
})

ライブフィドルを見る

于 2012-09-28T00:00:08.467 に答える
0

これを試して：

ライブデモ： http： //jsfiddle.net/sAsA5/

$(document).ready(function() {

    var $doc = $(this);
    var lp_claims = $doc.find('.lp_claims');
    var gap_claims = $doc.find('.gap_claims');
    var home_claims = $doc.find('.home_claims');

    $('#claimsform').change(function() {
        var target = $(this).val();
        if (target === "0") lp_claims.add(gap_claims).add(home_claims).css({ display:"none" });
        if (target === 'lp_claims') lp_claims.css({ display:"block" });
        if (target === 'gap_claims') gap_claims.css({ display:"block" });
        if (target === 'home_claims') home_claims.css({ display:"block" });
    });

});​
于 2012-09-28T00:17:48.073 に答える