Question

我希望更改每个选定下拉列表中的图像和文字。我有更改图像的代码。但我没有在哪里添加文本。示例 - 当有人单击选项1时，图像AND文本将更改为选项1，如果有人单击选项2，则图像AND文本将更改为选项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>

通过这种方式，您可以使用任意复杂的数据，而无需担心独特的分隔符等。

祝你好运！

Answer 2

要考虑的一种方法是使用<option>前缀在data-代码中设置自定义数据属性。您可以通过该元素的dataset属性访问数据，或者，如果您需要支持旧版浏览器，则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在using data attributes上有更多详细信息。

使用下拉列表更改图像和文本

2 个答案: