Question

I want to show a hidden div tag when i select a comparative question. My code for the drop down list is as follows :

    <%=Html.DropDownList("QuestionType", new List<SelectListItem>
                     {
                        new SelectListItem{Text="Standard", Value = "1"}, 
                        new SelectListItem{Text="Custom", Value = "2"},
                        new SelectListItem{Text="Demographic", Value = "3"},
                        new SelectListItem{Text="Ranking", Value = "4"},
                        new SelectListItem{Text="Comparative", Value = "5"}                                                                                    
                     }) %>

My code for my hidden div tag:

<!--Create Comparative Question Partial View-->
<div id="divCreateComparativeQuestion">
<% Html.RenderPartial("CreateComparativeQuestion"); %>
</div>

So when the user clicks on comparative question from the drop down list, I want to go something like

        $('#divCreateComparativeQuestion').show();
        $('#divCreateComparativeQuestion :input').removeAttr('disabled'); 

How would i go about achieving this? Thanks guys!

Answer 1

Basically what you’ve already got. Just hook into the change event of the dropdownlist.

$(function() {
   $('#yourdropdown').change(function() {
      $('#divCreateComparativeQuestion').show();
   });
});

No need to remove the disabled attribute – as that’s what show() does anyway.