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>

我想设置下面的 div 的 css 显示以阻止使用 jquery，具体取决于您在下拉菜单中选择的内容

因此，如果我选择“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 回答