Get data from select tag using JavaScript

Question

I have the following JavaScript methods

// METHOD 1
let categoryType = document.getElementById("create-listing-category-type");
let categoryTypeOption = categoryType.getElementsByTagName("option")[categoryType.selectedIndex].getAttribute("value");


// METHOD 2
let categoryType = document.getElementById("create-listing-category-type");
let categoryTypeOption = categoryType.options[categoryType.selectedIndex].value;

<div class="verification-main-input-div">
  <p class="verification-main-text">Category</p>

  <div class="drop-dawn-add-game-list">
    <div class="arrow-drop-down-games-main">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right chevron-for-drop-down"><polyline points="9 18 15 12 9 6"></polyline></svg>
    </div>
    <select id="create-listing-category-type" name="cars" class="drop-dawn-add-game-select">
      <option value="Coins">Coins</option>
      <option value="Items">Items</option>
      <option value="Boosting">Boosting</option>
    </select>
  </div>
</div>

What I am trying to accomplish is to get the data of the selected option from <select> tag. When I just console.log(categoryTypeOption); I get the default value, which is Coins, regardless if I choose another one. What am I doing wrong?

These two methods are based on answers I found when researching a solution.

Get selected value in dropdown list using JavaScript

score 2 · Accepted Answer · answered Jul 08 '20 at 15:47

Your METHOD 2 works... the issue is that you aren't triggering the recalc of your categoryTypeOption variable. Reference the snippet below... I added an onchange event handler to the select tag. and moved the METHOD 2 code within the handling function...

function onSelectChange() {
  let categoryType = document.getElementById("create-listing-category-type");
  let categoryTypeOption = categoryType.options[categoryType.selectedIndex].value;
  console.log(categoryTypeOption);
}

<div class="verification-main-input-div">
  <p class="verification-main-text">Category</p>
  <div class="drop-dawn-add-game-list">
    <div class="arrow-drop-down-games-main">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right chevron-for-drop-down">
        <polyline points="9 18 15 12 9 6"></polyline></svg>
    </div>
    <select id="create-listing-category-type" name="cars" class="drop-dawn-add-game-select" onchange="onSelectChange()">
      <option value="Coins">Coins</option>
      <option value="Items">Items</option>
      <option value="Boosting">Boosting</option>
    </select>
  </div>
</div>

score 1 · Answer 2 · answered Jul 08 '20 at 15:26

1

You can do it like this:

const el = document.getElementById("create-listing-cateogry-type");
const selectedValue el.options[el.selectedIndex].value;

This will get you the selected item from dropdown :)

answered Jul 08 '20 at 15:26

Tushar

665
5
11

Downcheck because your answer matches what the OP put as something he'd already tried using METHOD 2 – DynasticSponge Jul 08 '20 at 15:31

Get data from select tag using JavaScript

2 Answers2