Change image and text with dropdown

Question

Im looking to change the image and the text on each selected drop down. I have the code to change the images. But I have no where where to add the text. Example - When someone clicks on Option 1 the image AND text changes for option 1, if someone clicks on option 2 the image AND text changes for option two and so forth. As well as lets say I decide to add in links along with each option also, those will change too.

Thank You

            <img id="image" src="Null_Image.png" /> <br />
            <select id="imgList">
                <option value="1.png">Select Option</option>
                <option value="2.png">One 1</option>
                <option value="3.png">Two 2</option>
                <option value="4.png">Three 3</option>
            </select>




            <script>
            function setClass() {
                var img = document.getElementById("image");
                img.src = this.value;
                return false;
            }
            document.getElementById("imgList").onchange = setClass;
            </script>

Answer 1

One method to consider would be to set a custom data attribute in your <option> tags using the data- prefix. You can access the data through the dataset property of that element or, if you need to support older browsers, getAttribute('data-nameofyourproperty'):

var img = document.getElementById("image");
var text = document.getElementById("text");

function setClass(e) {
  var select = e.target;
  img.src = select.options[select.selectedIndex].value;
  text.innerHTML = select.options[select.selectedIndex].dataset.description;
  // use select.options[select.selectedIndex].getAttribute('data-description'); if you need to support older browsers
  return false;
}

document.getElementById("imgList").onchange = setClass;

<select id="imgList">
  <option value="https://http.cat/101" data-description="101 message">Select Option</option>
  <option value="https://http.cat/202" data-description="202 message">One 1</option>
  <option value="https://http.cat/303" data-description="303 message">Two 2</option>
  <option value="https://http.cat/404" data-description="404 message">Three 3</option>
</select>
<p id="text">Default text</p>
<img id="image" width="400" height="320" src="https://http.cat/100" />
<br />

MDN has more details on using data attributes.

Answer 2

what you need is a delimiter in your dropdown values so you can attach multiple data pieces in the single value, try something like this:

        <img id="image" src="Null_Image.png" /> <br />
        <div id="fillText"> select something </div>
        <select id="imgList">
            <option value="1.png|some text for 1">Select Option</option>
            <option value="2.png|other text here">One 1</option>
            <option value="3.png|a fancy title">Two 2</option>
            <option value="4.png|an interesting tidbit">Three 3</option>
        </select>

        <script>
        function setClass() {
            var img = document.getElementById("image");
            var fillText = document.getElementById("fillText");
            // generate an array by splitting the value on '|'
            var values = this.value.split('|');
            img.src = values[0]; // the first array value
            fillText.innerHTML = values[1]; // the second array value
            return false;
        }
        document.getElementById("imgList").onchange = setClass;
        </script>

this should let you stack a few items to work with into that option value; by splitting it apart and using the pieces individually you should be able to achieve the desired results.

if the data gets more complicated, consider storing it in an object and use the dropdown values as keys to look up the needed data:

        <img id="image" src="Null_Image.png" /> <br />
        <div id="fillText"> select something </div>
        <select id="imgList">
            <option value="valueOne">Select Option</option>
            <option value="valueTwo">One 1</option>
            <option value="valueThree">Two 2</option>
            <option value="valueFour">Three 3</option>
        </select>

        <script>

        var lookupValues = {
          'valueOne': {
            'img':'1.png',
            'txt':'some text for 1'
          },
          'valueTwo': {
            'img':'2.png',
            'txt':'other text here'
          },
          'valueThree': {
            'img':'3.png',
            'txt':'a fancy title'
          },
          'valueFour': {
            'img':'4.png',
            'txt':'an interesting tidbit'
          }
        };

        function setClass() {
            var img = document.getElementById("image");
            var fillText = document.getElementById("fillText");
            // get the lookup values with a key matching this.value
            var values = lookupValues[this.value];
            img.src = values['img']; // the 'img' value
            fillText.innerHTML = values['src']; // the 'src' value
            return false;
        }
        document.getElementById("imgList").onchange = setClass;
        </script>

this way you can use arbitrarily complex data without worrying about unique delimiters, etc.

good luck!