时间戳

首页 > 解决方案 > 使用选择选项时如何使用jQuery隐藏和显示效果

javascript - 使用选择选项时如何使用jQuery隐藏和显示效果

问题描述

我还有一个疑问，我接近答案但没有让它发挥作用，实际上我有一个默认输入文本和默认下拉菜单（下拉菜单包括西孟加拉邦和其他人）。现在，如果在下拉菜单下单击西孟加拉邦，则默认输入应该隐藏，西孟加拉邦下拉菜单应该显示。下面是我尝试过的代码。任何人都可以指导一下jQuery。

谢谢！！

                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
                                                        <option value="" disabled="" selected="">Select State</option>
                                                        <option value="WestBengal">West Bengal</option>
                                                        <option value="Others">Others</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group otherdistricts">
                                                    <input class="form-control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District"  autocomplete="false">
                                                </div>

                                                <div class="westbengaldistrict"  style="display:none"> 
                                                    <select class="form-control" name="district" id="district" autocomplete="false">
                                                        <option value="" selected disabled>Select Your District</option>
                                                        <option value="Alipurduar">Alipurduar</option>
                                                        <option value="Bankura">Bankura</option>
                                                        <option value="PaschimBardhaman">Paschim Bardhaman</option>
                                                        <option value="PurbaBardhaman">Purba Bardhaman</option>
                                                        <option value="Birbhum">Birbhum</option>
                                                        <option value="CoochBehar">Cooch Behar</option>
                                                        <option value="Darjeeling">Darjeeling</option>
                                                        <option value="UttarDinajpur">Uttar Dinajpur</option>
                                                        <option value="DakshinDinajpur">Dakshin Dinajpur</option>
                                                        <option value="Hooghly">Hooghly</option>
                                                        <option value="Howrah">Howrah</option>
                                                        <option value="Jalpaiguri">Jalpaiguri</option>
                                                        <option value="Jhargram">Jhargram</option>
                                                        <option value="UttarDinajpur">Uttar Dinajpur</option>
                                                        <option value="Kalimpong">Kalimpong</option>
                                                        <option value="Malda">Malda</option>
                                                        <option value="PaschimMedinipur">Paschim Medinipur</option>
                                                        <option value="PurbaMedinipur">Purba Medinipur</option>
                                                        <option value="Murshidabad">Murshidabad</option>
                                                        <option value="Nadia">Nadia</option>
                                                        <option value="North24Parganas">North 24 Parganas</option>
                                                        <option value="South24Parganas">South 24 Parganas</option>
                                                        <option value="Purulia">Purulia</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <script>
                                                 $(document).ready(function(){
                                                     $("#state").on("select",function() {
                                                         if ($(this).val() === "WestBengal") {
                                                            $(".otherdistricts").hide();
                                                            $(".westbengaldistrict").show();
                                                        }
                                                     });
                                                 });
                                            </script>

标签： javascriptphpjqueryhtmlcss

解决方案

您在 jquery 代码中有错误。使用下面的代码，它工作正常并经过测试。 

<script>

           $(document).ready(function(){
              $("select").change(function(){
                    $( "select option:selected").each(function(){
                        //enter bengal districts
                        if($(this).attr("value")=="WestBengal"){
                            $(".enterotherstates").hide();
                            $(".enterbengaldistricts").show();
                        }
                        //enter other states
                        if($(this).attr("value")=="Others"){
                            $(".enterbengaldistricts").hide();
                            $(".enterotherstates").show();
                        }
                    });
                });  
            }); 

        </script>

推荐阅读