Javascript-форум - смена значений через select

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - смена значений через select (https://javascript.ru/forum/misc/62638-smena-znachenijj-cherez-select.html)

смена значений через select

Здравствуйте, есть код который отображает значение выбранное в <select>

<span id="mydiv">10.</span>
 
<select name="city" id="myselect">
<option value="10">дома</option>
<option value="5">машины</option>
<option value="7">яблоки</option>
</select>

document.getElementById("myselect").addEventListener("change", function(){
      document.getElementById('mydiv').innerHTML = ""+this.value+".";   
    });

Как видно, в выводится значение которое в value (<option>).
Как можно добавить еще одно значение, которое совсем другое и выводилось бы в другом ?
Допустим:
Количество: 10.
Кто: Ваня. (совсем другое значение)

deatlink,
id не повторяйте

как это должно выглядеть?

понял, допустим mydiv2 будет. Но надо чтобы значение было другое

deatlink,
в чём проблема? что не работает?

Смотрите.
Вот к примеру таблица:

Id Color Job ID
1 green master 63hr
2 red programmer 7fgdg
1 yellow designer 74ythg

LALA: тут должно выводиться из столбика Job.

VAVA: тут должно выводиться из столбика Color.

Если в select выбрали green то:
LALA: master
VAVA: 63hr

deatlink,
не осилил.

Цитата:

Сообщение от рони (Сообщение 414654)

deatlink,
не осилил.

Всмысле?

deatlink,
не понял ваших пояснений

Дана таблица:
Id Color Job ID
1 green master 63hr
2 red programmer 7fgdg
1 yellow designer 74ythg

Если в <select> выбрали green то:
JOB: master
ID: 63hr

deatlink,
сделайте html таблицы, селекта и куда выводить.

<table>
<tr>
<td>ID</td><td>Color</td><td>Job</td><td>ID</td>
</tr>
<tr>
<td>1</td><td>green</td><td>master</td><td>63hr</td>
</tr>
<tr>
<td>2</td><td>red</td><td>programmer</td><td>7fgdg</td>
</tr>
<tr>
<td>3</td><td>yellow</td><td>designer</td><td>74ythg</td>
</tr>
</table>
<select>
<option>green</option>
<option>programmer</option>
<option>designer</option>
</select>

Job: <span id="mydiv"></span>
ID: <span id="mydiv"></span>

deatlink,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
      window.addEventListener('DOMContentLoaded', function() {
        var select = document.querySelector('select'),
        tr = document.querySelectorAll('tr'),
        mydiv = document.querySelectorAll('.mydiv');
        function d() {
        var i = +select.value;
        [].forEach.call( tr[i].querySelectorAll('td:nth-child(n+3)'), function(td,i) {
               mydiv[i].innerHTML = td.textContent
           });
        }
        select.addEventListener('change', d);
        d();
          });
  </script>
</head>

<body>
<table>
<tr>
<td>ID</td><td>Color</td><td>Job</td><td>ID</td>
</tr>
<tr>
<td>1</td><td>green</td><td>master</td><td>63hr</td>
</tr>
<tr>
<td>2</td><td>red</td><td>programmer</td><td>7fgdg</td>
</tr>
<tr>
<td>3</td><td>yellow</td><td>designer</td><td>74ythg</td>
</tr>
</table>
<select>
<option value="1">green</option>
<option value="2">red</option>
<option value="3">yellow</option>
</select><br>

Job: <span class="mydiv"></span><br>
ID: <span class="mydiv"></span>


</body>
</html>

спасибо большое