如何使用Javascript获取选项元素(从选择列表中选择)'value'属性的值

Question

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

检查代码段。我想使用"；值"；"的属性；选项"；元素，并且在进行选择之后。然后，我在javascript中使用它来获取数据。select元素不是任何表单元素的一部分。

Answer 1

您可以使用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>

Answer 2

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>

Answer 3

您可以使用以下方法获取当前选定的值：

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

如果你想在每次选择更改时获得当前值，那么你可以使用这样的东西：

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

Answer 4

在JavaScriptpure中，您可以执行以下操作：

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

在jquery中，您也可以执行以下操作：

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

现在你有了选择值

如果我能重写你的代码：

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>

Answer 5

嗨，你可以试试这个方法

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