How to use the value of selected option element 'value' attribute in javascript-CodePudding

<select id="tournaments-name-list" style="display: block; width: 50%;">
  <option disabled="" selected="" hidden="">Select Tournaments From List</option>
  <option class="tournaments-name" value="38299">AMANORA CA Inter Firm Cricket 2019</option>
  <option class="tournaments-name" value="47132">Amanora Champions Trophy 2019</option>
  <option class="tournaments-name" value="197831">Amanora Cricket Championship 2021</option>
  <option class="tournaments-name" value="973">Amanora Cricket League 2017</option>
  <option class="tournaments-name" value="79846">Amanora Cricket League Nov 2019</option>
  <option class="tournaments-name" value="1865">Amanora RSC 2017-18</option>
  <option class="tournaments-name" value="109151">Amanora Super League 2020</option>
  <option class="tournaments-name" value="31679">AMANORA SUPER LEAGUE JAN FEB 2019</option>
  <option class="tournaments-name" value="26011">RSC AMANORA CRICKET LEAGUE WINTER 2018</option>
</select>

Check the code snippet. I want to use the numeric value of the "value" attribute of the "option" element of only the selected one and also after selection is made. Then, I use it in javascript to fetch data. The select element is not a part of any form element.

CodePudding user response：

You can use the onchange event of the select element.

function handleChange(event) {
  const value = event.target.value;
  console.log(value)
}

<select id="tournaments-name-list" style="display: block; width: 50%;" onchange="handleChange(event)">
  <option disabled="" selected="" hidden="">Select Tournaments From List</option>
  <option class="tournaments-name" value="38299">AMANORA CA Inter Firm Cricket 2019</option>
  <option class="tournaments-name" value="47132">Amanora Champions Trophy 2019</option>
  <option class="tournaments-name" value="197831">Amanora Cricket Championship 2021</option>
  <option class="tournaments-name" value="973">Amanora Cricket League 2017</option>
  <option class="tournaments-name" value="79846">Amanora Cricket League Nov 2019</option>
  <option class="tournaments-name" value="1865">Amanora RSC 2017-18</option>
  <option class="tournaments-name" value="109151">Amanora Super League 2020</option>
  <option class="tournaments-name" value="31679">AMANORA SUPER LEAGUE JAN FEB 2019</option>
  <option class="tournaments-name" value="26011">RSC AMANORA CRICKET LEAGUE WINTER 2018</option>
</select>

CodePudding user response：

function change() {
  const selectValue = document.getElementById("tournaments-name-list").value;
alert(selectValue)
}

<select id="tournaments-name-list" style="display: block; width: 50%;" onchange="change()">
  <option disabled="" selected="" hidden="">Select Tournaments From List</option>
  <option class="tournaments-name" value="38299">AMANORA CA Inter Firm Cricket 2019</option>
  <option class="tournaments-name" value="47132">Amanora Champions Trophy 2019</option>
  <option class="tournaments-name" value="197831">Amanora Cricket Championship 2021</option>
  <option class="tournaments-name" value="973">Amanora Cricket League 2017</option>
  <option class="tournaments-name" value="79846">Amanora Cricket League Nov 2019</option>
  <option class="tournaments-name" value="1865">Amanora RSC 2017-18</option>
  <option class="tournaments-name" value="109151">Amanora Super League 2020</option>
  <option class="tournaments-name" value="31679">AMANORA SUPER LEAGUE JAN FEB 2019</option>
  <option class="tournaments-name" value="26011">RSC AMANORA CRICKET LEAGUE WINTER 2018</option>
</select>

CodePudding user response：

You can get the current selected value using this:

const target = window['tournaments-name-list'];
const value = target.value;

If you want to get the current value each time your select changes, then you can use something like this:

const target = window['tournaments-name-list'];
let value = null;
const updateValue = () => {
   value = target.value;
   console.log('Your value:', value);
};
target.addEventListener('change', updateValue);

CodePudding user response：

in javascript pure you can do like below:

  var selectedValue= document.getElementById("tournaments-name-list").value

in jquery you can do like below as well:

 var selectedValue = $('#tournaments-name-list').val()

and now you have the selected value

if I would rewrite you code :

var selectedValue

function getValue(){
  selectedValue= document.getElementById("tournaments-name-list").value
}

<select id="tournaments-name-list" style="display: block; width: 50%;" onchange="getValue()">
  <option disabled="" selected="" hidden="">Select Tournaments From List</option>
  <option class="tournaments-name" value="38299">AMANORA CA Inter Firm Cricket 2019</option>
  <option class="tournaments-name" value="47132">Amanora Champions Trophy 2019</option>
  <option class="tournaments-name" value="197831">Amanora Cricket Championship 2021</option>
  <option class="tournaments-name" value="973">Amanora Cricket League 2017</option>
  <option class="tournaments-name" value="79846">Amanora Cricket League Nov 2019</option>
  <option class="tournaments-name" value="1865">Amanora RSC 2017-18</option>
  <option class="tournaments-name" value="109151">Amanora Super League 2020</option>
  <option class="tournaments-name" value="31679">AMANORA SUPER LEAGUE JAN FEB 2019</option>
  <option class="tournaments-name" value="26011">RSC AMANORA CRICKET LEAGUE WINTER 2018</option>
</select>

CodePudding user response：

Hi you can try this method

    <select id="tournaments-name-list" style="display: block; width: 50%;" onchange="getValue()">
    <option disabled="" selected="" hidden="">Select Tournaments From List</option>
    <option class="tournaments-name" value="38299">AMANORA CA Inter Firm Cricket 2019</option>
    <option class="tournaments-name" value="47132">Amanora Champions Trophy 2019</option>
    <option class="tournaments-name" value="197831">Amanora Cricket Championship 2021</option>
    <option class="tournaments-name" value="973">Amanora Cricket League 2017</option>
    <option class="tournaments-name" value="79846">Amanora Cricket League Nov 2019</option>
    <option class="tournaments-name" value="1865">Amanora RSC 2017-18</option>
    <option class="tournaments-name" value="109151">Amanora Super League 2020</option>
    <option class="tournaments-name" value="31679">AMANORA SUPER LEAGUE JAN FEB 2019</option>
    <option class="tournaments-name" value="26011">RSC AMANORA CRICKET LEAGUE WINTER 2018</option>
  </select>

<div id="show">
    
</div>
<script>
    function getValue() {
        var select = document.getElementById('tournaments-name-list')
        var valuee = select.options[select.selectedIndex].value
        console.log(valuee)
    }
</script>