Как получить значение <select> для использования в Js

Рейтинг: -1Ответов: 1Опубликовано: 16.01.2023

Я пишу код для сайта с выбором криптокошелька в зависимости от того что ты выбрал в дропдауне . Пользователь выбирает криптовалюту и ему высвечивается номер кошелька при нажатии на который он копируется. Так как мне получить значение для дальнейшего изменения текста с номером криптокошелька?

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>
</head>
<body>
    <div class="crypto">
     
        <span>Донат криптовалютой</span>
        <img class="crypto-img" src="crypto.png">
        <label for="donate" class="label">Выбор валюты:</label>
        <select class="crypto-dd" id="wallets">
            <option disabled selected class="crypto-dd-option-start">Не выбрано</option>
            <option value="0" class="crypto-dd-option">&#129505; BITCOIN</option>
            <option value="1" class="crypto-dd-option">&#128154; USDT</option>
            <option value="2" class="crypto-dd-option">&#128150; TRON</option>
            <option value="3" class="crypto-dd-option">&#128156; SOL</option>
            <option value="4" class="crypto-dd-option">&#128420; ETHERIUM</option>
        </select>

        <button class="wallet" id="result">Не выбрана валюта</button>
    </div>
</body>
</html>

JS

    const numWlt = ['bc1qu6n3eu64jgmv5kvfq2egr5n8ml4svaf9uf8tnv', 'TS94K1icj8pNmYnYQ7r468LCu2c87XZcwF', 'TS94K1icj8pNmYnYQ7r468LCu2c87XZcwF', 'Cq9BhTNvvUCLX7maYVkUL3UaVjfM7Ec5EB5yF5ecWFpx', '0x4e58DfAC6Ed3fC130936BCA2CFe063DCddd5a745'];

const wlt = document.querySelector("#wallets");

wlt.addEventListener('change', e => {
  const res = document.querySelector("#result");
  res.textContent = `Номер кошелька: ${numWlt[e.target[e.target.selectedIndex].value]}`;

});
css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Можно вот так получать кошельки:

const numWlt = ['USDTRX34556788934', 'OMNI48867757499922', 'ERC20775848339919938'];

const wlt = document.querySelector("#wallets");

wlt.addEventListener('change', e => {
  const res = document.querySelector("#result");
  res.textContent = `Номер кошелька: ${numWlt[e.target[e.target.selectedIndex].value]}`;

});
<div>
  <select id="wallets">
    <option disabled selected>Выберите кошелек</option>
    <option value="0">Кошелек 1</option>
    <option value="1">Кошелек 2</option>
    <option value="2">Кошелек 3</option>
  </select>
</div>


<div id="result" style="margin-top: 30px"></div>

Ваш код:

function wrapper() {
  const numWlt = ['bc1qu6n3eu64jgmv5kvfq2egr5n8ml4svaf9uf8tnv', 'TS94K1icj8pNmYnYQ7r468LCu2c87XZcwF', 'TS94K1icj8pNmYnYQ7r468LCu2c87XZcwF', 'Cq9BhTNvvUCLX7maYVkUL3UaVjfM7Ec5EB5yF5ecWFpx', '0x4e58DfAC6Ed3fC130936BCA2CFe063DCddd5a745'];

  const wlt = document.querySelector("#wallets");

  wlt.addEventListener('change', e => {
    const res = document.querySelector("#result");
    res.textContent = `Номер кошелька: ${numWlt[e.target[e.target.selectedIndex].value]}`;

  });
}

window.addEventListener('DOMContentLoaded', wrapper);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="app.js"></script>
</head>

<body>
  <div class="crypto">

    <span>Донат криптовалютой</span>
    <img class="crypto-img" src="crypto.png">
    <label for="donate" class="label">Выбор валюты:</label>
    <select class="crypto-dd" id="wallets">
      <option disabled selected class="crypto-dd-option-start">Не выбрано</option>
      <option value="0" class="crypto-dd-option">&#129505; BITCOIN</option>
      <option value="1" class="crypto-dd-option">&#128154; USDT</option>
      <option value="2" class="crypto-dd-option">&#128150; TRON</option>
      <option value="3" class="crypto-dd-option">&#128156; SOL</option>
      <option value="4" class="crypto-dd-option">&#128420; ETHERIUM</option>
    </select>

    <button class="wallet" id="result">Не выбрана валюта</button>
  </div>
</body>

</html>