Question

I am building a form which will be used to enter the result of a student into a school database. Now the school has 2 sections for the 5th till 8th standard and 1 for the 9th till 10th.

Here is what i want to do, there should be a select box where the user can select the standard for which he wants to enter data, if the selected standard is within the limit of 5th to 8th then another select box needs to be dynamically added which will have the option to select “Section A” or “Section B”. If the user selects 9th or 10th grade then no section select box should be there.

Answer 1

Welcome to StackOverflow.

Since you haven’t shown any of your html markup or attempts at writing the JavaScript for yourself I’ll just give you a bare-bones jQuery solution and leave it to you to match up to your actual html.

In my opinion the easiest way is to implement your requirement is to include both select elements in the html markup and just hide and show the second one as applicable. (Not only is this easier than dynamically adding and removing the element, it has the added advantage of leaving your form accessible for the occasional user who has JavaScript disabled.)

$(document).ready(function() {
    var $section = $("#section").hide();
    $("#standard").change(function() {
        var val = +$(this).val();
        if (val >= 5 && val <= 8)  // assume option elements have value="5", etc.
            $section.show();
        else
            $section.hide();
    });
});

Further reading: http://api.jquery.com/