嵌套的div显示和隐藏下拉列表值选择

Question

I am trying to open drop down and other fields on the basis of others. I am trying to create a form for clients to fill their form with specific requirement.

The DIV will hide and show on the basis of dropdown selected using jquery.

Here is how my html code looks like.

<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 -->

This is just a regular jquery i am using. Here is how i am using my 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();
    });

I dont want so many .hide and .show property for every div. My one drop down is based on another and after selection of 2nd dropdown selection.

this is just of Static Website. Then i have several other fields. I dont know how can i do this. I dont want to make it very complicated i just want to make things simple and reusable so i dont have to use so many .hide and .show

If any suggestions. please help.

Thank you!

Answer 1

better hiding and showing as required.

 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 --> 

Answer 2

I built a quick utility to do this, it accepts a few data attributes...

http://jsfiddle.net/buxbajvd/

<form class="progressiveDisclosure">
    <select name="selectNode" class="associatedHandler">
        <option>foobar</option>
        <option>something</option>
    </select>
</form>

<div class="associatedListener" style="display: none;" data-for="selectNode" data-value="something" data-props="matchAll">selectNode is something</div>

The data-for must match the handlers name attribute and the data-value must match its value for this node to show. It can also accept multiple arguments data-for="someSelect,someSelect2" data-value="someValue,someValue2"

It is also possible to use reverse conditioning and setting data-value="!someValue"

var progressiveDisclosure = $('.progressiveDisclosure'),
    associatedHandlers = $('.associatedHandler'),
    associatedListeners = $('.associatedListener'),

    toggleAssociatedListeners = function(e){
        var name = $(e.target).attr('name');

        $.each(associatedListeners, function(index, node){

            var names = node.associationFor,
                values = node.associationValue,
                valid = false,
                matchAll = false;

            if(node.associationOpts && node.associationOpts.indexOf('matchAll') > -1){
                matchAll = true;
            }

            var inputIsAssociation = false;
            for(var i=0;i<names.length;i++){

                if(names[i] == name){
                    inputIsAssociation = true;
                }

                var value = progressiveDisclosure.serializeArray().filter(function(input){
                    return input.name == names[i];
                })[0].value;

                if(values[i].indexOf('!') > -1 && values[i].replace('!','') !== value){
                    valid = true;
                } else if(values[i].indexOf('!') > -1 && values[i].replace('!','')  == value){
                    valid = false;
                    if(!matchAll){
                        break;
                    }
                } else if(values[i] == value){
                    valid = true;
                    if(!matchAll){
                        break;
                    }
                } else if(matchAll){
                     valid = false;
                    break;
                }
            }

            if(!inputIsAssociation){
                return;
            }

            if(valid){
                $(node).show();
            } else if(inputIsAssociation) {
                $(node).hide();
            }

        });

    }

$.each(associatedListeners, function(index, node){
    var $node = $(node),
        opts = $node.data('props');
    node.associationFor = $node.data('for').split(',');
    node.associationValue = $node.data('value').split(',');
    if(opts){
        node.associationOpts = opts.split(',');
    }
});

associatedHandlers.on('change', this, function(e){
    toggleAssociatedListeners(e);
});

Answer 3

I would go with the hide all show what you want but with a plus try making up names from the original selectors therefore:

$('select').change(){
     $('.divclass').hide();//which youll have to add
     var id = $(this).val(); //or 
              $(this).find('selected').val() 
    //not sure which works for selects
     id=id.replace('design','')
     //obviously you need a replace for this specific example('design','');
     $('#static-website-'+id).show();
}

In a few words the ids you want to show and the options or values ae related to the ids

Answer 4

You can hide all , and show what you want.

    function showD(whatYouWantShow){

    //hide all  $(".mydiv").hide();
    //show whatYouWantShow   $("#d1").show();
    }

<div class=mydiv id="d1"></div>
<div class=mydiv id="d2"></div>
<div class=mydiv id="d3"></div>