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

我希望更改每个选定下拉列表上的图像和文本。我有更改图像的代码。但是我没有在哪里添加文本。示例-当有人单击选项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>

选择选项
一1
两个2
三三
函数setClass（）{
var img=document.getElementById（“图像”）；
img.src=该值；
返回false；
}
document.getElementById（“imgList”）.onchange=setClass；

您需要的是在下拉列表值中添加一个分隔符，以便可以在单个值中附加多个数据段，请尝试以下操作：

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

挑选
选择选项
一1
两个2
三三
函数setClass（）{
var img=document.getElementById（“图像”）；
var fillText=document.getElementById（“fillText”）；
//通过拆分“|”上的值生成数组
var values=this.value.split（“|”）；
img.src=值[0]；//第一个数组值
fillText.innerHTML=值[1]；//第二个数组值
返回false；
}
document.getElementById（“imgList”）.onchange=setClass；

这将允许您将一些要处理的项目堆叠到该选项值中；通过将其分开并单独使用，您应该能够实现所需的结果

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

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

挑选
选择选项
一1
两个2
三三
变量查找值={
“valueOne”：{
“img”：“1.png”，
'txt'：'1的一些文本'
},
“价值二”：{
“img”：“2.png”，
“txt”：“此处的其他文本”
},
“价值三”：{
‘img’：‘3.png’，
“txt”：“一个花哨的标题”
},
“价值四”：{
“img”：“4.png”，
“txt”：“一个有趣的小道消息”
}
};
函数setClass（）{
var img=document.getElementById（“图像”）；
var fillText=document.getElementById（“fillText”）；
//使用与此.value匹配的键获取查找值
var values=lookupValues[this.value]；
img.src=值['img']；//img'值
fillText.innerHTML=values['src']；//src'值
返回false；
}
document.getElementById（“imgList”）.onchange=setClass；

通过这种方式，您可以使用任意复杂的数据，而不必担心唯一的分隔符等

---

祝你好运

> P>一种考虑的方法是使用<代码>数据-<代码>前缀在<代码> <代码>标签中设置自定义数据属性。您可以通过该元素的

dataset

属性访问数据，或者，如果需要支持较旧的浏览器，

getAttribute（'data-nameofyourproperty'）

：

var img=document.getElementById（“图像”）；
var text=document.getElementById（“text”）；
函数集合类（e）{
var选择=e.target；
img.src=select.options[select.selectedIndex].value；
text.innerHTML=select.options[select.selectedIndex].dataset.description；
//如果需要支持较旧的浏览器，请使用select.options[select.selectedIndex].getAttribute（'data-description'）
返回false；
}
document.getElementById（“imgList”）.onchange=setClass

选择选项
一1
两个2
三三
默认文本