堆栈内存溢出
  简体   繁体   English

如何使用 Javascript 获取选项元素的值（选自 select 列表）'value' 属性

[英]How to get the value of option element (selected from select list ) 'value' attribute using Javascript

 原文  2021-09-28 09:33:12  8   5    javascript/ html

问题描述

 <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.然后，我在 javascript 中使用它来获取数据。 The select element is not a part of any form element. select 元素不是任何表单元素的一部分。

5 个解决方案

解决方案1
 2 已采纳  2021-09-28 09:37:35

You can use the onchange event of the select element.您可以使用select元素的onchange事件。 

 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>

解决方案2
 0  2021-09-28 09:42:00

 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>

解决方案3
 0  2021-09-28 09:42:43

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:如果您想在每次 select 更改时获取当前值，那么您可以使用如下代码：

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

解决方案4
 0  2021-09-28 09:44:41

in javascript pure you can do like below:在 javascript pure 中，您可以执行以下操作：

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

in jquery you can do like below as well:在 jquery 你也可以像下面这样：

 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>

解决方案5
 0  2021-09-28 09:45:21

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用JavaScript从多个选项中选择所选值 - How to select selected value from multiple option using javascript javascript-从选择列表中获取选择的值 - javascript - get selected value from select list Javascript：如何使用内部选择来获取数据列表中的选定选项值 - Javascript: how to get selected option value that is in the datalist with inside select 获取选项中的“值”属性 <select>使用Javascript或Jquery - Get the “value” attribute of an option in a <select> with Javascript or Jquery 如何从DropDown中的选定选项获取title属性的值 - How to get value of title attribute from a selected option in DropDown 如何从动态创建的 select 元素中获取所选选项的值？ - How do you get the value of the selected option from a dynamically created select element? 如何在选择了属性的情况下获取选项的值 - How to get the value of option with attribute selected 如何获取所选选项的数据属性值？ - How to get data attribute value for selected option? 如何根据选择选项中的选定值列出值 - How to list the values according to selected value from select option 从弹出窗口中的选择中获取选择的选项值 - Get selected option value from select in popup
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM