jQuery 选择更改显示/隐藏 div 事件

Question

I am trying to create a form which when the select element ‘parcel’ is selected it will show a div but when it is not selected I would like to hide the div.这是我目前的标记：

到目前为止，这是我的 HTML ..

     <div class="row">
    Type
        <select name="type" id="type" style="margin-left:57px; width:153px;">
                <option ame="l_letter" value="l_letter">Large Letter</option>
                <option name="letter" value="letter">Letter</option>
                <option name="parcel" value="parcel">Parcel</option>
        </select>
</div>

<div class="row" id="row_dim">
    Dimensions
        <input type="text" name="length" style="margin-left:12px;" class="dimension" placeholder="Length">
        <input type="text" name="width" class="dimension" placeholder="Width">
        <input type="text" name="height" class="dimension" placeholder="Height">
</div>

到目前为止，这是我的 jQuery ..

   $(function() {
    $('#type').change(function(){
        $('#row_dim').hide();
        $("select[@name='parcel']:checked").val() == 'parcel').show();
    });
});

原文由 user2716389 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用以下 JQuery。 演示

$(function() {
    $('#row_dim').hide();
    $('#type').change(function(){
        if($('#type').val() == 'parcel') {
            $('#row_dim').show();
        } else {
            $('#row_dim').hide();
        }
    });
});

原文由 Yasitha 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试：

 if($("option[value='parcel']").is(":checked"))
   $('#row_dim').show();

甚至：

 $(function() {
    $('#type').change(function(){
        $('#row_dim')[ ($("option[value='parcel']").is(":checked"))? "show" : "hide" ]();
    });
});

JSFiddle：http: //jsfiddle.net/3w5kD/

原文由 Ivan Chernykh 发布，翻译遵循 CC BY-SA 3.0 许可协议