0

I am using a vanilla "select" dropdown so the user can select one of the options. I need to know what option has been selected so I can update another column for example : if the user selected "Very good", the "Score" column will update to 5/5.

I have tried giving ids and changing the "value" attribute of the different options, but it does not solve the problem that i do not know which one is selected.

Here is the dropdown I am using

<div class="dropdown">
  <select>
    <option value="very bad">very bad</option>
    <option value="bad">bad</option>
    <option value="normal">normal</option>
    <option value="good">good</option>
    <option value="very good">very good</option>
  </select>
</div>

I expect the HTML element "option" to change if it is selected but even when inspecting, I cannot see a difference. Note that the "value" attribute is always equal to the inner Text if that can help. I believe I am not using Jquery.

SilentCity
  • 76
  • 10
  • what is `Score` column? and when you select an option, the HTML does change. That `option` takes an attribute `selected` – quirimmo Jan 10 '19 at 15:22
  • You're quite close to the answer, you have to do those on the select element, the options doesn't become selected, the select get the value. – Lamonde Jan 10 '19 at 15:24
  • Possible duplicate of [jQuery Get Selected Option From Dropdown](https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) – Vasilisa Jan 10 '19 at 15:25
  • where is your form – Giridharan Jan 10 '19 at 15:28
  • giri : I am not using a form, I am using a dropdown. Lamonde & quirimmo : where can we see if the column takes the attribute `selected` ? When inspecting, I cannot see it change, also, I am fairly new to Rails and Javascript so I am unsure of what JQuery is.. – SilentCity Jan 10 '19 at 15:31
  • 2
    document.querySelector(".dropdown select").value; get you the value and to see the change, you can add an event listener: document.addEventListener('change', function(){ /* Action here*/ }); – Lamonde Jan 10 '19 at 15:34

1 Answers1

0

When selected, an item from a dropdown list such as the one I provided takes the attribute select. For reasons I do not know, this change is not visible while using "inspect" in the browser.

To find selected element, you have to use document.querySelector("select").value).

There is no need to play around with the id or the value attribute.

halfer
  • 19,824
  • 17
  • 99
  • 186
SilentCity
  • 76
  • 10