ASP.NET MVC DropDownList: Getting the Selected Text (rather than the Value)
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&开发者_Python百科gt;
<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?
Pretzel - try:
$("#SomeName option:selected").text();
in fact, the combo of the above and $("#SomeName").val(); should give you everything you need.
cheers...
When a form is posted, the value of the selected option is always posted back. To get the text of the option, you'll need a server-side lookup table to match numeric values with names. Alternately, you can change your select back to how it was originally and have a lookup table in JavaScript land to show the numeric value rather than placing value attributes on your options.
pretzel,
as i mentioned briefly in the comment, you should 'grace' the 0.1% of non js users with some 'message' if they don't have js turned on. here's what i have immediately following the <body> tag in my templates:
<noscript>
<div id="noscript" class="readme">
<p>Yoursite name requires that you have javascript turned on -
Follow <a target="_blank" href="http://www.google.com/support/bin/answer.py?answer=23852">
this walkthrough</a> to enable javascript</p>
</div>
</noscript>
and this can be additionally styled by using the css nostyle stuff:
noscript{
background-color: red;
color: white;
border: 2px solid white;
font-size: 1.2em;
}
or by using the better approach of using a defined class for it:
.readme {
background-color:#702444;
color:#FFFFFF;
display:block;
margin:10px 5px;
padding:10px;
text-align:center;
font-weight: bold;
border: 6px solid #fff;
}
.readme a
{
color: #FFAC50;
}
etc, etc...
cheers again
加载中,请稍侯......
精彩评论