Как взять данные в select из option кроме value и вывести в #id?

Question

[Mesuti]

Привет!
Есть input.
Привык брать только значения value и дальше уже с ним делал математику.
Вот пример:

html

<p>Сумма: <span id="info1"></span></p>

<select onchange="costCalculator()"  id="money">
  <option value="10">Rub</option>
  <option value="20">Usd</option>
  <option value="30">Eur</option>
</select>

<p>Валюта: <span id="info2"></span></p>

JavaScript

function costCalculator() {
    
var y = document.getElementById("money").value; 
info1.innerHTML = y
        
var x = document.getElementById("money").value;   
info2.innerHTML = x
        
}

Но в этом коде берется только значение value.
Как в строке Валюта: выводить не value, а Rub или Usd либо Eur

Не могу найти решение.
Спасибо всем ответившим!

Comments

[EEclipsEE]

Не увидел я в вашем когде input. Тут есть select. Но если вы хотите забрать все значения возможные в селекте то просто получите массив его дочерних элементов, а именно все option. А дальше можете работать с этим массивом и делать все что надо.

Либо я что-то не так понял в вашем коде или вопросе.

[Mesuti]

EEclipsEE, извиняюсь, уже голова не думает) вопрос про select и option внутри. как можно вывести не только value а еще и текст ? это либо новый атрибут заводить либо брать название option ? не могу понять..

[EEclipsEE]

Александр Сорокин Ну рассматривайте option как обычный тэг с текстом. и тогда у него можно взять innerText и записать его в переменную а потом вставлять в любое место. На вашем примере это так.

var y = document.getElementById("money").value;
var text = document.getElementById("money").innerText;

и теперь вставляете text куда надо так же как вы x и y вставляете

[Mesuti]

EEclipsEE, спасибо за направление!
Но все же код не работает.
Можете сказать почему?

Получился такой js:

function costCalculator() {
    
var y = document.getElementById("money").value; 
info1.innerHTML = y
        
//var x = document.getElementById("money").value;   
var z = document.getElementById("money").innerText;
info2.innerHTML = z

}

В поле Валюта не вставляется текст из option

[Mesuti]

EEclipsEE, я еще пробую вариант добавления доп.атрибута, чтобы задать текст в option.

Например так
<option txt="Рубль" value="10">Rub</option>
И вывести так

var text = document.getElementById("money").txt;
info2.innerHTML = text

Но это также не срабатывает. В общем пальцем в небо(
Как-то выборочно не знаю элементарные вещи

[Дима Долготер]

Значения типа каких? Атрибуты или что?

[Mesuti]

да, по сути без разницы.
Как можно взять либо содержимое option либо как новый атрибут завести?

[Дима Долготер]

value друг мой. все те же value)

[Mesuti]

Так они же уже заняты цифрами) которые вывожу в другое поле.
Нужно назначать на каждую цифру другое значение?

Не могу понять как это делается(

[Дима Долготер]

Александр Сорокин, попробую чтото вроде this

. text. Если на jquery

[EEclipsEE]

Александр Сорокин, Дело в том что вы пытаетесь получить текст select а надо текст option. вот я взял ваш кусок и поправил все как надо. если вопрос етсь пишите. тут ваше решение

[Mesuti]

EEclipsEE, Спасибо за совет! Подробнее изучу вопрос.

Answer 1

[RomanPrivalov]

Codepen
Если я правильно понял интересует что-то подобное?

Comments

[Mesuti]

По сути да, но цифра вверху, а буквы внизу. =) сейчас попробую переделать.
Спасибо!

[Mesuti]

Многое впервые вижу.
Рабочий, но очень сложный код.
Спасибо!
Как вариант реализации подойдет