В раскрывающемся списке я хотел бы иметь возможность отображать пользовательский текст на основе выбора, сделанного в списке.
В приведенном ниже примере мне удалось отобразить выбранное значение в раскрывающемся списке.
Но, например, вместо отображения «var1» я хотел бы отображать больше текста, например:

  • если "var1", то вывести "Переменная 1 построена с... (длинный текст)"
  • если "var2", то вывести "Переменная 2 важна, потому что... (длинный текст)"

Спасибо заранее !

<!DOCTYPE html>

<body>
    <h1 style="color: green">
        Que recherchez vous ?
    </h1>
    
<p> 
        <select id="select1">
            <option value="var1">Variable 1</option>
            <option value="var2">Variable 2</option>
            <option value="var3">Variable 3</option>                        
        </select>
    </p>

<button onclick="getOption()"> Check option </button>
    
    <script type="text/javascript">
    function getOption() {
        selectElement = document.querySelector('#select1');
        output = selectElement.value;
        document.querySelector('.output').textContent = output;
    }
    </script>

<p> The value of the option selected is:
        <span class="output"></span>
    </p>


    
</body>

</html>

0
Damien Dotta 4 Фев 2022 в 12:11
Было бы полезно, если бы язык кода был английским или объяснение на французском языке, а не их комбинация.
 – 
Bjop
4 Фев 2022 в 12:26
1
Хорошо, смотрите мой отредактированный пост на английском
 – 
Damien Dotta
4 Фев 2022 в 12:29
Я обновляю свой ответ.
 – 
Bjop
4 Фев 2022 в 12:34

3 ответа

Лучший ответ

Вы можете попробовать что-то вроде этого, вы можете использовать поток управления Switch-case

<body>
    <h1 style="color: green">
        Que recherchez vous ?
    </h1>
    
<p> 
        <select id="select1">
            <option value="var1">Variable 1</option>
            <option value="var2">Variable 2</option>
            <option value="var3">Variable 3</option>                        
        </select>
    </p>

<button onclick="getOption()"> Check option </button>
    
    <script type="text/javascript">
    function getOption() {
        selectElement = document.querySelector('#select1');
      let selectedOption = '';
        output = selectElement.value;
       switch(output) {
        case "var1":
          selectedOption = "Variable 1 is built with ... (long text)";
          break;
        case "var2":
          selectedOption = "Variable 2 is important because... (long text)";
          break;
        default:
          selectedOption = "default selected";
      } document.querySelector('.output').textContent = output + selectedOption;
    }
    </script>

<p> The value of the option selected is:
        <span class="output"></span>
    </p>


    
</body>
1
Nilesh Mishra 4 Фев 2022 в 12:40
Спасибо, у вас есть идея, как улучшить представление отображаемого текста (например, жирным шрифтом с разрывами строк)?
 – 
Damien Dotta
4 Фев 2022 в 12:47

Код js:

const longTexts = ["var1 is built with ... (long text)", "var2 is important because... (long text)", "var3 is ... (long text)"];

function getOption() {
    const select = document.querySelector('#recherche');
    const selectedText = longTexts[select.selectedIndex];

    document.querySelector('.output').textContent = selectedText;
}
1
Bjop 4 Фев 2022 в 12:33
Спасибо, у вас есть идея, как улучшить представление отображаемого текста (например, жирным шрифтом с разрывами строк)?
 – 
Damien Dotta
4 Фев 2022 в 12:38
Вы можете добавить html-код внутри строки, например '<p>Just some <span>text</span> here</p>'
 – 
Bjop
4 Фев 2022 в 12:42

Исходя из вашего вопроса, вы хотите, чтобы определенный текст отображался на .output на основе value из <select>

Что вам нужно сделать, это:

  • слушайте <select>, чтобы изменить его значение
  • получить выбранное значение
  • сделайте свое условие на основе выбранного значения
  • установить текст
const outputDiv = document.querySelector('.output')

// Listen for <select> to change value
document.getElementById('select1').addEventListener('input', (evt) => {
  // Get the selected value
  const value = evt.target.value

  // Do the conditional
  switch (value) {
    case 'var1':
      // Set the text
      outputDiv.textContent = 'something';
      break;
    case 'var2':
      outputDiv.textContent = 'something else';
      break;
    default:
      console.log("This shouldn't happen but it did lol");
  }
})

Теперь, если вам также нужно получить текущее значение при первой загрузке, вы можете сделать:

document.getElementById('select1').value

Вы также можете использовать событие change, но оно несколько отличается. Вот соответствующий вопрос для этого: Разница между "изменением" и событие "input" для элемента "input"


Не заметил, что у вас есть кнопка для ручной проверки.

Ответ все равно будет аналогичным. Вместо этого вам нужно просто создать функцию, которую ваша кнопка будет вызывать с аналогичным содержимым, как указано выше.

function getOption() {
  // Get current value
  const value = document.getElementById('select1').value

  // Do the conditional
  switch (value) {
    case 'var1':
      // Set the text
      outputDiv.innerHTML = '<b>This is in bold text</b><br>';
      break;
    case 'var2':
      outputDiv.innerHTML = '<span>something else but not bold</span><br>';
      break;
    default:
      console.log("This shouldn't happen but it did lol");
  }
}
1
doesnotmatter 4 Фев 2022 в 12:51
Спасибо, у вас есть идея, как улучшить представление отображаемого текста (например, жирным шрифтом с разрывами строк)?
 – 
Damien Dotta
4 Фев 2022 в 12:47
1
Я обновил ответ. Вы используете innerHTML, а затем можете самостоятельно вставлять HTML-теги.
 – 
doesnotmatter
4 Фев 2022 в 12:52
Спасибо, а что мне нужно вставить document.querySelector('.output'), чтобы он отображался правильно?
 – 
Damien Dotta
4 Фев 2022 в 13:14
Что-то вроде этого ? document.querySelector('.output').textContent = outputDiv.innerHTML;
 – 
Damien Dotta
4 Фев 2022 в 13:20