javascript - 使用下拉菜单更改图像和文本

Question

我希望更改每个选定下拉菜单上的图像和文本。我有更改图像的代码。但我不知道在哪里添加文字。示例 - 当有人单击选项 1 时，选项 1 的图像和文本会发生变化，如果有人单击选项 2，选项 2 的图像和文本会发生变化，依此类推。假设我决定在每个选项中添加链接，这些也会发生变化。

谢谢

            <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

您需要的是下拉值中的分隔符，以便您可以在单个值中附加多个数据片段，请尝试如下操作:

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

这应该让您可以将一些要使用的项目堆叠到该选项值中；通过将其拆分并单独使用各个部分，您应该能够实现所需的结果。

如果数据变得更复杂，请考虑将其存储在一个对象中，并使用下拉值作为键来查找所需的数据:

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

这样您就可以使用任意复杂的数据，而不必担心唯一的分隔符等。

祝你好运!