ansaurus

Question

ASP.NET MVC DropDownList: Getting the Selected Text (rather than the Value)

Answer 1

+2 A:

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.

Jacob 2010-10-27 19:30:50

Wow. That's pretty crappy. well, thanks for cluing me in. Anyway.. I can't do the server-side thing because (as shown in my original post above) the numerical values aren't unique. I'll have to go the 2nd route have another lookup table and have Javascript manipulate that.

Pretzel 2010-10-27 19:35:45

Answer 2

+1 A:

Pretzel - try:

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

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

cheers...

jim 2010-10-27 19:33:26

I thought about this and it generally works if Javascript is enabled on the browser, but I'm operating under the assumption that javascript might be broken.

Pretzel 2010-10-27 19:41:36

i'm confused. i thought this issue arose out of the 'new' requirement to '...show the numerical values as they were being selected via Javascript/JQuery' - doh :)

jim 2010-10-27 19:58:19

if javascript were assumed, you'd have a whole raft of options. i know we talk about progressive enhancement but some things can regressively paint you into a corner unless some minimum 'term of use' is put in place. i know this the hard way as i had to mandate javascript as a requirement for a site that we are working on just now as the functionality was just getting too restrictive to contain inside the 'no js' box. of course, your case may vary (and nice one if it does) but in our case, we showed too many jquery goodies for the stakeholders to ignore :)

jim 2010-10-27 20:09:50

yeah, well, I'm a bit of a n00b when it comes to modern web 2.0 development. So I'm still figuring out what's realistic and what isn't. I've been told to operate under the assumption that Javascript will most likely work, but if it doesn't, then the app better degrade gracefully. Ergo, I can't rely on JS to populate fields for the user.

Pretzel 2010-10-27 20:18:29

that's fair enough. in that case, a 'side' suggestion may be to code the value of the select with both relevant data values and parse them at the server side. so something like <option value="25#GHI">GHI</option> might be the way to go. tho of course, you'd then have to parse the number out for the textbox to display to the js enabled users (tho this still has me baffled i.e. that special priviledge is given in terms of displaying in the textbox). i'll follow this thread to see how you solve it as it's an unusual scenario. all the best again- jim

jim 2010-10-27 20:26:43

Jim: You'll be pleased to know that I ended up going this route. It works fine as loog as Javascript is enabled and running fine which I think will be 99.9% of the time. I'll figure out how to degrade gracefully one day, but not today. Thanks again!

Pretzel 2010-10-27 20:58:51

Btw, I considered your last suggestion of parsing out the values, but that seems like an ugly hack. Still, I'm sure we've all committed worse programming crimes than that... ;)

Pretzel 2010-10-27 21:00:44

pretzel - nice stuff. btw, remember to include the <noscript> tags in your template. i'll detail in a new message exactly what i do in this respect

jim 2010-10-28 06:46:15

Answer 3

+1 A:

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"&gt;
    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

jim 2010-10-28 06:53:35

Hey Jim, Thanks very much for the follow-up. I'll add this to my web app today.

Pretzel 2010-10-28 14:00:54

ansaurus

tags:

views:

answers:

ASP.NET MVC DropDownList: Getting the Selected Text (rather than the Value)

related questions