且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

根据选择下拉列表显示或隐藏多个字段-jQuery

更新时间:2022-12-03 10:51:09

首先,您应该从元素中删除ID正在显示",并添加一个类名正在显示",或者可以将此类添加到所有这些元素的父元素中.其次,您应该将ID更改为jquery中的class.而且我认为您没有添加加载jquery的脚本.

first, you should remove id "showing" from elements and add a class name "showing" or you can add this class to the parent element of all these elements. second, you should change your id to class in jquery. and I think you didn't add the script that loads jquery.

修改后的代码:

 $(document).ready(function(){
        $('.showing').hide();
        $('#condition').change(
            function(){
                if(this.value == "yes"){
                    $('.showing').show();
                }
                else {
                    $('.showing').hide();
                }
            }
        )
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-4"> 
                        <div class="d-flex">                    
                            <div class="flex-fill p-2">
                            <select name="playing" class="form-control" id="condition" required>
                                    <option value="no">No</option>
                                    <option value="yes">Yes</option>
                                </select>
                            </div>
                        </div> 
                    </div>
                
 <div class="row">
                    <div class="col-2">
                        <div class="d-flex">
                            <div class="p-1">
                                <label class="p-2 showing" for="what">What</label>
                            </div> 
                        </div>
                    </div> 
                    <div class="col-4"> 
                        <div class="d-flex">                       
                            <div class="flex-fill p-2">
                                <input
                                        type="text" 
                                        class="form-control input-text showing" 
                                        name="wat" 
                                >
                            </div>
                        </div> 
                    </div>
                    <div class="col-2">
                        <div class="d-flex">
                            <div class="p-1">
                            <label class="p-2 showing" for="type">Type</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-4"> 
                        <div class="d-flex">   
                            <div class="flex-fill p-2">
                                <input
                                        type="text" 
                                        class="form-control input-text showing" 
                                        name="type" 
                                >
                            </div>
                        </div> 
                    </div>     
                </div>