一尘不染

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

html

我正在尝试创建一个表单,当选择选择元素“ parcel”时,它将显示一个div,但是当未选择时,我想隐藏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();   
    });
});

阅读 439

收藏
2020-05-10

共1个答案

一尘不染

使用以下JQuery。

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