CODEWITHSUNDEEP
javascripthtml
user12051965
user12051965

Reputation: 147

Get data from select tag using JavaScript

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

Upvotes: 2

Views: 775

Answers (2)

DynasticSponge
DynasticSponge

Reputation: 1451

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>

Upvotes: 2

Tushar
Tushar

Reputation: 675

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

Upvotes: 1

Related Questions