Q:

How do you modify the HTML that's currently being displayed in the browser when the user changes the selected option in a  element? ( asp.net)

Sorry, I am new to web development and ASP.Net.  How do you dynamically modify the HTML that's currently being displayed in the browser when the user changes the selected option in a <select> element? 
@*DropDown:*@
    <div class="form-group">
        @Html. LabelFor(model => model. CategoryId, "CategoryId", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html. DropDownList("CategoryId", null, htmlAttributes: new { @class = "form-control" })
            @Html. ValidationMessageFor(model => model. CategoryId, "", new { @class = "text-danger" })
        </div>
    </div>

@*changes:*@
    @if (Model. CategoryId == 3)
        {
            string s = "stuff";
            <h1>s</h1>
        }

A:

Typically you would use JavaScript to accomplish this by attaching a change event to the dropdownlist. 
Here is what that would look like with jQuery (a popular JavaScript framework):
    <div class="form-group">
        @Html. LabelFor(model => model. CategoryId, "CategoryId", htmlAttributes: new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html. DropDownList("CategoryId", null, htmlAttributes: new { @class = "form-control" })
              @Html. ValidationMessageFor(model => model. CategoryId, "", new { @class = "text-danger" })
         </div>
     </div>

   <h1></h1>

    <script>
        $(function() {
            $('#CategoryId').on('change', function (e) {
                 var categoryId = this.value;

                 //do stuff to HTML based on selected value
                 if (parseInt(categoryId) === 3) {
                    $('h1').text('stuff');
                 }
             });
        });
    </script>

