javascript - 嵌套 div 在下拉值选择上显示和隐藏

Question

我正在尝试在其他字段的基础上打开下拉菜单和其他字段。我正在尝试创建一个表格，供客户填写特定要求的表格。

DIV 将根据使用 jquery 选择的下拉菜单隐藏和显示。

这是我的 html 代码的样子。

<div class="website-type">
                <label class=""><b>Website Type</b>
                    <select>
                        <option>--------Select--------</option>
                        <option value="static-website">Static Website</option>
                        <option value="dynamic-website">Dynamic Website</option>
                        <option value="ecommerce-website">eCommerce Website</option>
                        <option value="seo">Search Engine Optimization</option>
                        <option value="graphic-design">Graphic Design</option>
                    </select>
                </label>
            </div>


            <div class="static-website" id="static-website">

                    <label class=""><b>Design Level</b>
                        <select>
                                <option>--------Select--------</option>
                                <option value="basic-design">Basic Design</option>
                                <option value="business-design">Business Design</option>
                                <option value="creative-design">Creative Design</option>
                        </select>
                    </label>
                     <br/>



                <div class="static-website-basic">

                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="5" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="5" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of Basic Static Box -->



                 <div class="static-website-business">



                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="10" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="10" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of BUSINESS Static Box -->



                 <div class="static-website-creative">



                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="5" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="5" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of Creative Static Box -->


            </div> <!-- End of Static Box -->

这只是我正在使用的常规 jquery。这是我使用 jquery 的方式

$("select").change(function()
        {
            $( "select option:selected").each(function()
            {
                if($(this).attr("value")=="static-website"){
                    $(".dynamic-website").hide();
                    $(".ecommerce-website").hide();
                    $(".seo").hide();
                    $(".graphic-design").hide();
                    $(".static-website").show();
                }
                if($(this).attr("value")=="basic-design"){
                    $(".static-website-business")..hide();
                    $(".static-website-creative").hide();


                    $(".static-website-basic").show();
                }
                if($(this).attr("value")=="business-design"){
                     $(".static-website-basic").hide();
                    $(".static-website-creative").hide();
                    $(".static-website-business").show();
                }
                if($(this).attr("value")=="creative-design"){
                     $(".static-website-basic").hide();
                    $(".static-website-business").hide();
                    $(".static-website-creative").show();

                    ​
                } 

}

});
        }).change();
    });

我不希望每个 div 都有这么多 .hide 和 .show 属性。我的一个下拉菜单基于另一个下拉菜单，并且在选择第二个下拉菜单选择之后。

这只是静态网站。然后我还有其他几个领域。我不知道我该怎么做。我不想让它变得非常复杂，我只是想让事情变得简单并且可重用，所以我不必使用这么多 .hide 和 .show

如果有什么建议。请帮忙。

谢谢!

Answer 1

根据需要更好地隐藏和显示。

var oldselected;
$("select").on('change',this,function(e){
  if(oldselected){$('.'+oldselected).hide();}
  var selectedopt=$(this).val();   
  $('.'+selectedopt).show();
  oldselected=selectedopt;
  });

div:not(.website-type){display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="website-type">
                <label class=""><b>Website Type</b>
                    <select>
                        <option>--------Select--------</option>
                        <option value="static-website">Static Website</option>
                        <option value="dynamic-website">Dynamic Website</option>
                        <option value="ecommerce-website">eCommerce Website</option>
                        <option value="seo">Search Engine Optimization</option>
                        <option value="graphic-design">Graphic Design</option>
                    </select>
                </label>
            </div>


            <div class="static-website" id="static-website">

                    <label class=""><b>Design Level</b>
                        <select>
                                <option>--------Select--------</option>
                                <option value="basic-design">Basic Design</option>
                                <option value="business-design">Business Design</option>
                                <option value="creative-design">Creative Design</option>
                        </select>
                    </label>
                     <br/>



                <div class="static-website-basic">

                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="5" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="5" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of Basic Static Box -->



                 <div class="static-website-business">



                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="10" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="10" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of BUSINESS Static Box -->



                 <div class="static-website-creative">



                    <label class="no-pages-static"><b>Number Of Pages</b>
                        <input type="text" name="no-pages-static" value="5" />
                    </label>

                     <br/>


                    <label class="no-form-static"><b>Number Of Simple Form</b>
                        <input type="text" name="no-form-static" value="5" />
                    </label>

                     <br/>

                    <label class="seo-static"><b>SEO (On Page)</b>
                        <input type="radio" name="seo-static" group="seo-static"> Yes
                        <input type="radio" name="seo-static" group="seo-static"> No

                    </label>

                    <br/>

                    <label class="content-writting-static"><b>Content Writing</b>
                        <input type="radio" name="content-static" group="content-writting-static"> Yes
                        <input type="radio" name="content-static" group="content-writting-static"> No
                    </label>
                 </div><!-- End of Creative Static Box -->


            </div> <!-- End of Static Box -->