Question

I have a form to which I want to add extra fields depending on the value of a dropdown list. They would be sets of fields and I was thinking on dynamically changing a div’s content with the html from a render partial, which would render a PartialView with the fields I want.

Right now the code for the drop down list is the following

    <p>
        <label for="CatalogItem.Type"> Type: </label>
        <%=Html.DropDownList("CatalogItem.Type",Model.Types, "Choose Type") %>
    </p>

    <div id = "ExtraInfo">

    </div>

And I want to put the extra stuff (fields specialized for the type) in the ExtraInfo div. What would the jQuery code be for this?

Thanks!

Answer 1

First add a css class selector to your dropdown, lets call it ‘mydropdown’ for now

use something like this:

<script language=”javascript” type=”text/javascript” >

      function addtoDiv()
        {
        $(document).ready(function() {

        var myval=$(”#mydropdown”).val(); // get value of dropdown


        if ( myval == "somevalue") // check myval value
        {
            $("#ExtraInfo").html("add html code inside div here"); // add code based on         value
        }

        }}
  </script>