Получить элемент массива Javascript со значением параметра HTML

Question

У меня есть выборка с различными параметрами, и мне нужно добраться до элемента массива в зависимости от выбора.

HTML

<select id="liste">
    <option value="0">Value 0</option> 
    <option value="1">Value 1</option> 
    <option value="2">Value 2</option> 
</select>

Мой массив это как: t_data = [5, 3, 4]

Javascript

var data = t_data[document.getElementById('liste').value]
// I also tried something like this 
var data = t_data[parseInt(document.getElementById('liste').value)]

Но я не могу получить значение в массиве ...

И, очевидно, это хорошо работает, когда я ставлю:

var data = t_data[0]

Должно быть, глупо, но я не программист html / js, и сейчас я ломаю голову ...

Answer 1

Единственное, что вы делаете неправильно, это использование «значения» вместо «selectedIndex». просто замените это и тада .. ваш код работает нормально.

var arr = [23,24,25,26,27];
var opt = document.getElementById('liste');
var data;
opt.addEventListener('change', function(){
   data = arr[opt.selectedIndex];
   console.log(data);
});

<select id="liste">
  <option vlaue="0">value 0</option>
  <option vlaue="1">value 1</option>
  <option vlaue="2">value 2</option>
  <option vlaue="3">value 3</option>
 </select>
 

Answer 2

Посмотрите на фрагмент кода ниже - каждый раз, когда вы изменяете значение элемента select, t_data[liste.value] отправляется на консоль.

t_data = [5, 3, 4];

var liste = document.getElementById('liste');
liste.addEventListener('change', logData);

function logData() {
  var data = t_data[liste.value];
  console.log(data);
}

<select id="liste">
    <option value="0">Value 0</option> 
    <option value="1">Value 1</option> 
    <option value="2">Value 2</option> 
</select>

Answer 3

Вот как вы можете получить свои результаты.

t_data = [5, 3, 4];
document.getElementById('liste').addEventListener('change', function() {
  // this will display you selected value from array in p tag
  document.getElementById('result').innerHTML = t_data[this.value];
  // console.log(t_data[this.value]);
});

  <select id="liste">
    <option value="0">Value 0</option> 
    <option value="1">Value 1</option> 
    <option value="2">Value 2</option> 
</select>
<p id="result"></p>

Answer 4

Использовать метод selectedIndex.

Пример:

let liste = document.querySelector('#liste')

let t_data = [5, 3, 4]

let data = t_data[liste.selectedIndex])

<select id="liste">
    <option value="0">Value 0</option> 
    <option value="1">Value 1</option> 
    <option value="2">Value 2</option> 
</select>