1
\$\begingroup\$

I have a small script that checks what the user selects, and based in his selection (1, 2 or 3) show the elements, but I'm not quite happy with the result. I believe that it could be much better the code, and repeat less times, here is my code example.

$(function() {

            //Hide elements
            $('#input').hide();
            $('#textarea').hide();
            $('#option').hide();

            //Show element based on selection
            $('#input_type').change(function(){    // use class or use $('select')

                var option_selected = $(this).val();

                switch(option_selected) {
                    case "1":
                        $('#input').show();
                        $('#textarea').hide();
                        $('#option').hide();

                        break;
                    case "2":
                        $('#textarea').show();
                        $('#input').hide();
                        $('#option').hide();
                        break;
                    case "3":
                        $('#option').show();
                        $('#textarea').hide();
                        $('#input').hide();
                        break;
                    default:
                        $('#input').hide();
                        $('#textarea').hide();
                        $('#option').hide();
                }

            });
        });
\$\endgroup\$
  • 1
    \$\begingroup\$ Can you show the HTML? Typically this kind of task is handled by one short line of code that changes the parent element's class/attribute and the rest is handled by CSS rules. \$\endgroup\$ – wOxxOm Feb 14 '17 at 22:01
  • \$\begingroup\$ on that note.. you say "code example". Please do note that example code is off-topic for code review, because reviewing it does not provide benefits to the original author and is unsatisfactory for the reviewer when suggestions can not be applied because "the real code is different" ... Could you please clarify your explanatory text or alternatively include the actual code in the post (best including the html)? Thanks! \$\endgroup\$ – Vogel612 Feb 14 '17 at 22:55
  • \$\begingroup\$ obviusly it can be much better and simple, will post my ans in mean... \$\endgroup\$ – user7417866 Mar 17 '17 at 4:58
1
\$\begingroup\$

The nice thing about the code below is that if there are ever more inputs you only need to add one line for each, though as has been mentioned in the comments the way you do your html and css can decrease the size of your javascript.

$(function() {
    var elements = {
        "1" : "#input",
        "2" : "#textarea",
        "3" : "#option"
    };
    var show_selected = function(selected) {
        for (var key in elements)
            $(elements[key]).toggle(selected === key);
    };
    //Hide elements
    show_selected();

    //Show element based on selection
    $('#input_type').change(function(){    // use class or use $('select')
        show_selected($(this).val());
    });
});

below is an example where your html can reduce your javascript.

<textarea class="input_type" id="textarea"></textarea>
<input class="input_type" id="input" />
<select class="input_type" id="option">
    <option>Option 1</option>
    <option>Option 2</option>
</select>
<select id="input_type">
    <option>-</option>
    <option>input</option>
    <option>textarea</option>
    <option>option</option>
</select>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
    //Hide elements
    $(".input_type").hide();

    //Show element based on selection
    $('#input_type').change(function(){    // use class or use $('select')
        $(".input_type").hide();
        $("#" + $(this).val()).show();
    });
});
</script>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.