How to change a DropDownListFor value back to null with javascript on ASP.NET - MVC?

Question

I have multiple DropDownListFor assigned to the same variable that are hidden and only get visible when a certain radiobutton is activated with javascript. The problem is, if you change the value of a DropDownListFor and then change the radiobutton, the value for the previous DropDownListFor is still active, even tho is not visible, and when i submit, the previous DropDownListFor value is the one that gets passed.

Is there a way to bring the value of all the DropDownListFor back to the default 'null' in javascript without reloading the page?

View code:

<h3>Tipo de Infraestrutura:</h3>

   <input type="radio" name="selectedLinhaType" id="150KV"/> 150kV <br>
   <input type="radio" name="selectedLinhaType" id="220KV"/> 220KV <br>
   <input type="radio" name="selectedLinhaType" id="400KV"/> 440KV <br>

    <div class ="infobox" id="is150KV">
        <fieldset>
            <h3>Linha 150KV:</h3>
            <p>@Html.DropDownListFor(m => m.SelectedLinha.NumLinha, ViewData["ListLinhas150"] as List<SelectListItem>, "")</p>
        </fieldset>
    </div>
    <div class ="infobox" id="is220KV">
        <fieldset>
            <h3>Linha 220KV:</h3>
            <p>@Html.DropDownListFor(m => m.SelectedLinha.NumLinha, ViewData["ListLinhas220"] as List<SelectListItem>, "")</p>
        </fieldset>
    </div>
    <div class="infobox" id="is400KV">
        <fieldset>
            <h3>Linha 400KV</h3>
            <p>@Html.DropDownListFor(m => m.SelectedLinha.NumLinha, ViewData["ListLinhas400"] as List<SelectListItem>, "")</p>
        </fieldset>
    </div>

Javascript:

    <script type="text/javascript">
    $(document).ready(function () {
        $('#is150KV').hide(); $('#is220KV').hide(); $('#is400KV').hide();
        $('#150KV').change(function () {
            $('#is220KV').hide(); $('#is400KV').hide();
            $('#is150KV').show();
        });

        $('#220KV').change(function () {
            $('#is150KV').hide(); $('#is400KV').hide();
            $('#is220KV').show();
        });

        $('#400KV').change(function () {
            $('#is150KV').hide(); $('#is220KV').hide();
            $('#is400KV').show();
        });
    })
    </script>

Edit: Fixed, added ids to each DropDownListFor and disabled/enabled it on javascript with '.attr'. '.prop' should work too but i didn't test it.

Thanks for the help.

Answer 1

Instead of simply hiding the drop down list, disable it. Disabled form elements are not submitted ever.

$('#is220KV').attr('disabled', true).hide();

And conversely:

$('#is220KV').attr('disabled', false).show();