'Is it possible to make a select list that displays certain text or certain image depending on what is selected?

Is it possible to make a select list that displays certain text or certain image depending on what is selected?

What I have so far:

<html>
  <title>OCF</title>
  <img src="(removed image source for privacy)"" width=" 200">
  <hr>
  <select>
    <option id="odd">Oddities</option>
    <option id="live">Creatures</option>
    <option id="created">Specimens</option>
    <option id="what">Unknowns</option>
  </select>
  <p>Paragraph</p>

</html>

Example: When "Oddities" is selected, then text below the select list will display "Organisms that have strange features."

htmllistselect


Solution 1:[1]

if you don't mind using jQuery:

//when the document is ready
$(document).ready( ()=> { 
    //adds an handler for the change event of each <select>
    $('select').change(()=>{
      //if the selected option is 'odd'
      if ( $(this).filter('option:selected').prop('id') === 'odd' )
        //update the text of the next <p> with a static text
        $(this).next('p').text('Organisms that have strange features.');
    })
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Diego De Vita

Related Questions