Question

Once upon a time, I had a DropDownList with Options built using this code:

<%= Html.DropDownList("SomeName", someSelectList)%>

which produced HTML like this:

<select id="SomeName" name="SomeName">
<option>ABC</option>
<option>DEF</option>
<option>GHI</option>
<option>JKL</option>
</select>

Form Submission would always return one of the above options to my class’s public member “SomeName” via ModelBinding. My internal validation code would then select the correct numerical value from an internal Dictionary. Life was good.

Then I was asked to show the numerical values as they were being selected via Javascript/JQuery in a separate Textbox. So now I have the following options:

<select id="SomeName" name="SomeName">
<option value="50">ABC</option>
<option value="10">DEF</option>
<option value="25">GHI</option>
<option value="10">JKL</option>
</select>

and the following JQuery code:

$(document).ready(function() {
    $('#SomeName').change(function() {
        $("input#someNumber").val($('#SomeName').val());
    });
});

User selects the String and is shown the numerical value in the box. Great.

The problem now is that when the Form is Submitted, the Model Binding gets the numerical Value (eg. 50) rather than the String (eg. ABC)

How do I over-ride this behavior and get the selected String again?

Answer 1

Pretzel – try:

$("#SomeName option:selected").text();

in fact, the combo of the above and $("#SomeName").val(); should give you everything you need.

cheers…