We help IT Professionals succeed at work.

Set a value of an HTML Dropdown box

Dale Harris
Dale Harris asked
on
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
Comment
Watch Question

Top Expert 2011

Commented:
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

Top Expert 2011

Commented:
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 HarrisProfessional Services Engineer
CERTIFIED EXPERT

Author

Commented:
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?


Top Expert 2011
Commented:
I am typo king!  Even in my correction, I had a typo.
I can verify that the code below works as HTML... create a new HTML file with this in it and it works.
The trick is just for you to replace value="Hamburgers" with your C# value.

<body>

<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.getElementById("FoodName").value="Hamburgers";
</script>

</body>

Open in new window

Dale HarrisProfessional Services Engineer
CERTIFIED EXPERT

Author

Commented:
Thanks for the quick response.

You are the man!

-Dale  Harris
Dale HarrisProfessional Services Engineer
CERTIFIED EXPERT

Author

Commented:
Great solution!  Quick response!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.