Question

我有一个下拉

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

我想根据您在下拉列表中选择的内容将以下div的css显示设置为使用jquery阻止

所以如果我选择“home_claims”，带有.home_claims的div会将display属性设置为block。

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

谢谢大家伙。

Answer 1

试试这个

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

CHECK DEMO

Answer 2

试试这个

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

查看实时fiddle

Answer 3

试试这个：

现场演示： 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" });
    });

});

使用jquery根据下拉选择值更改css

3 个答案: