Mark D. Foti
Mark D. Foti

Reputation: 59

How to access and store selected option value from dropdown menu

I'm having a lot of trouble. I feel like what I'm trying to do should be dead-simple, yet I cannot figure out what the heck to do.

What I am trying to do is grab whatever value is selected and submitted in my form, and based on that value, show/hide certain tables on the current web page.

  <form id="position" method="get">
    <p>Choose your position: </p>
    <select id="position-select" name="positions">
      <option value="utg">UTG</option>
      <option value="utg1">UTG +1</option>
      <option value="utg2">UTG +2</option>
      <option value="lojack">Lowjack</option>
      <option value="hijack">Hijack</option>
      <option value="cutoff">Cutoff</option>
      <option value="button">Button</option>
      <option value="sb">Small Blind</option>
    </select>
    <button type="submit">Submit</button>
  </form>

I am trying to understand how I can, upon the user selecting one of the dropdown values and then pressing "submit", how can I grab whichever selection they chose and like save it to a variable or something so that I can then show/hide these tables on the page.

I keep reading about the post and get method and like communicating with a server, but I don't even want to do that. I want to basically change the UI of the current web page based on whichever selection they select and submit.

If I can save that value to a variable then I can run something like if (their selected value === xy or z) then show xy or z table and hide the rest of the tables.

Does this make sense? Can anybody help?

Upvotes: 0

Views: 1359

Answers (1)

Valery Fun
Valery Fun

Reputation: 194

if you're trying to use JS to trigger the change i think there's a similar questioned that has been answered:

How to get the value of a selected option and save it into a variable? (Javascript)

basically, i think you will need to trigger an onChange value for it.

Upvotes: 1

Related Questions