asked on

Set a value of an HTML Dropdown box

Hello,

We are developing using the new Razor syntax. I have the top part of the page in C#. I have the rest of the page in HTML. My page extension is a CSHTML file.

We have a normal HTML dropdown:

<label>Food Item</label>
<select name="FoodName">
<option value="HotDog">HotDogs</option>
<option value="Hamburgers">Hamburgers</option>
<option value="Steaks">Steaks</option>
</select>

And I'm storing the value of FoodName to a variable in C#:

FoodSelection = Request["FoodName"];

Now I can put that selection into the Database and pull it back out and set it to my FoodSelection variable, but I can't figure out how to select the proper dropdown for the user to see.

For a textbox, it's easy, I just set the value to "@FoodSelection" so it looks like this:

<value = "@FoodSelection" />

But how can I do this for a Dropdown box?

I hope my question is easy enough.

I'm open to using anything that works, to include AJAX and Javascript. We already have some Javascript on the page.

-Dale

nap0leon

Very easy to do with some javascript, though you could probably do it server-side as well.

Presuming you have the answer avaialble as "@FoodSelection", change your HTML to use an "id=FoodName" on the select so that you can reference it later.

The JavaScript below the select box should render as;
documentGetElementById("FoodName").value="HotDog";

<label>Food Item</label>
                    <select name="FoodName" id="FoodName">
                      <option value="HotDog">HotDogs</option>
                      <option value="Hamburgers">Hamburgers</option>
                      <option value="Steaks">Steaks</option>
                    </select>


<script>
documentGetElementById("FoodName").value="@FoodSelection";
</script>

Open in new window

nap0leon

sorry - a couple of typos

<label>Food Item</label>
<select name="FoodName" id="FoodName">
<option value="HotDog">HotDogs</option>
<option value="Hamburgers">Hamburgers</option>
<option value="Steaks">Steaks</option>
</select>

<script>
document.GgtElementById("FoodName").value="@FoodSelection";
</script>

Dale Harris

ASKER

Hmm, oddly enough it's not working.

The ID can be different from the Name right?

I wonder what I can try instead. I know the name is being stored correctly into the DB because I was able to see it.

And I tested it out and saw that the variable was being stored correctly from the database.

I even tested this out with our "address" field and tried to set the address field (textbox) to a value.

This didn't work either.

I even changed it to:

document.GetElementById("FoodName").value="@FoodSelection";

Any ideas?

ASKER CERTIFIED SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dale Harris

ASKER

Thanks for the quick response.

You are the man!

-Dale Harris

Dale Harris

ASKER

Great solution! Quick response!