Question

我构建了这段代码，以便在从列表中选择一个选项时显示/隐藏div，但是当我点击某个选项时没有任何事情发生。

我的HTML：

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

<div class="row" id="row_dim">
    <input type="text" name="length" class="dimension" placeholder="Length">
</div>

我的jQuery：

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

Answer 1

添加jquery库文件

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

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

<div class="row" id="row_dim">
    <input type="text" name="length" class="dimension" placeholder="Length">
</div>

https://jsfiddle.net/9wLn265s/

Answer 2

如果您的代码生成为动态而不是用于此$(document).on，就像这样

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">    
    <select name="type" id="type" style="margin-left:57px; width:153px;">
        <option ame="l_letter" value="l_letter">Large Letter</option>
        <option name="parcel" value="parcel">Parcel</option>
    </select>                    
</div>

<div class="row" id="row_dim">
    <input type="text" name="length" class="dimension" placeholder="Length">
</div>

使用jQuery在select选项上显示/隐藏div

2 个答案: