0

In a dropdown list, I would like to be able to display custom text based on the choice made in the list.
In my example below, I manage to display the selected value in the dropdown.
But for example, instead of displaying "var1", I would like to display more text, for example :

  • if "var1" then display "Variable 1 is built with ... (long text)"
  • if "var2" then display "Variable 2 is important because... (long text)"

Many thanks in advance !

<!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>
Damien Dotta
  • 771
  • 3
  • 13

3 Answers3

2

The js code:

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;
}
Bjop
  • 330
  • 4
  • 19
  • Thanks, do you have an idea of ​​how to improve the presentation of the displayed text (in bold with line breaks for example) ? – Damien Dotta Feb 04 '22 at 09:38
  • You can add html code inside a string for example ```'

    Just some text here

    '```     – Bjop Feb 04 '22 at 09:42
2

you can try something like this ,you can use Switch-case control flow

<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;
//here you can add your style  
//document.querySelector('.output').style.fontWeight = "800";
    }
    </script>

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


    
</body>
Nilesh Mishra
  • 418
  • 2
  • 15
  • Thanks, do you have an idea of ​​how to improve the presentation of the displayed text (in bold with line breaks for example) ? – Damien Dotta Feb 04 '22 at 09:47
  • @DamienDotta you can add custom style as your requirement like below. document.querySelector('.output').style.fontWeight ="800"; – Nilesh Mishra Aug 04 '22 at 17:29
2

Based on your question, you want certain text to be displayed on .output based on the value of <select>

What you need to do then is:

  • listen for <select> to change its value
  • get the selected value
  • do your conditional based on the selected value
  • set the text
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");
  }
})

Now if you also need to get the current value on first load, you can do:

document.getElementById('select1').value

You can also use the event change but it's somewhat different. Here's a relevant question for that: Difference between "change" and "input" event for an `input` element

Didn't notice you have a button for manually checking.

The answer will still be similar. What you then instead need to do is just create a function that your button will call with similar content as above answer.

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");
  }
}
captainskippah
  • 1,350
  • 8
  • 16