CODEWITHSUNDEEP
javascripthtml
Damien Dotta
Damien Dotta

Reputation: 939

How to display custom text from a dropdown liste

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 :

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>

Upvotes: 0

Views: 180

Answers (3)

Nilesh Mishra
Nilesh Mishra

Reputation: 275

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>

Upvotes: 3

captainskippah
captainskippah

Reputation: 1525

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");
  }
}

Upvotes: 2

Bjop
Bjop

Reputation: 336

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;
}

Upvotes: 2

Related Questions