Question

这似乎是一个简单的问题，但我不明白为什么它不适合我。我有一个下拉菜单和图像。图像会根据下拉菜单中的内容进行更改，但我不明白为什么我的功能没有被触发。

<select onchange="changeImage()" id="samples">
            <option value="Cpp">C++ Example</option>
            <option value="Mobile">Mobile Applications Example</option>
</select>

和javascript

<script>
        function changeImage()
        {
            var selection = document.getElementById("samples");

            var image = document.getElementById("shown");

            if(selection.value == "Cpp")
            {
            image.src="images/CppCoursesCapture.JPG";
            }
            else if(selection.value == "Mobile")
            {
            image.src="images/MobileQuizCapture.JPG";
            }
        }
    </script>

该功能不会改变图像

编辑：错过了一些假装

Answer 1

A lovely jsbin.com demo

你应采取不那么突兀的方法

<select id="samples">
  <option value="Cpp" data-image="images/CppCoursesCapture.JPG">C++ Example</option>
  <option value="Mobile" data-image="images/MobileQuizCapture.JPG">Mobile Applications Example</option>
</select>

然后在JavaScript中

// implementation
function updateImage() {
  var selected = this.options[this.selectedIndex];

  var image = document.getElementById("shown");
  image.src = selected.getAttribute("data-image");
}

// target SELECT
var elem = document.getElementById("samples");

// change event
elem.addEventListener("change", function(event){
  updateImage.call(this);
});

// initialization
updateImage.call(elem);

Answer 2

您需要将条件包装在括号中：

if (selection.value == "Cpp")

..和...

else if (selection.value == "Mobile")

如果您运行开发人员工具，它会发现您的语法不正确..并且破坏了脚本。

Answer 3

function changeImage()
        {
            alert("Function Called");
            var selection = document.getElementById("samples");

            var image = document.getElementById("shown");

            if (selection.value == "Cpp")
            {
            image.src="images/CppCoursesCapture.JPG";
            }
            else if( selection.value == "Mobile")
            {
            image.src="images/MobileQuizCapture.JPG";
            }
        }

忘了括号？

Answer 4

我建议将图像的路径存储为选项的值，并使用它来更改图像src。以下显示了如何为背景图像执行此操作，但可以轻松地对图像标记进行调整。

这样做的好处是你可以简单地为选择添加更多选项，它们可以在不需要修改javascript的情况下工作。

set background image from dropdown menu - javascript

<select id="samples">
    <option>Select an image</option>
    <option value="http://t2.gstatic.com/images?q=tbn:ANd9GcT-wQk0CTwl93EmiaUaoIjpMVmwHDNBz_7hN0UNpAz5DCWq66Sp-w">C++ Example</option>
    <option value="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg">Mobile Applications Example</option>
</select>
<img id="image" />


$(document).ready(function()
{
    var image = $('#image');
    $('#samples').bind('change', function(event){
        var img = $(this).val();
        if(img == null || typeof img === 'undefined' || $.trim(img) === '')
            image.removeAttr('src');
        else
            image.attr('src', img);
    });
});

这是一个JS小提琴，说明如何为您的目的这样做：

http://jsfiddle.net/hKBtp/5/

Answer 5

感谢帮助人员，我的问题是 - ＆gt;

if selection.value = cpp

而我错过了括号和引号

if(selection.value = "cpp")

Answer 6

试试这个小提琴：

http://jsfiddle.net/yQBz7/1/

<script>
    function changeImage()
    {
        var selection = document.getElementById("samples");

        var image = document.getElementById("shown");

        if(selection.value == "Cpp")
        {
        image.innerHTML="<img src='http://www.techiesin.com/wp-content/uploads/2013/07/c-logo.jpg' />";
        }
        else if(selection.value == "Mobile")
        {
        image.innerHTML="<img src='http://www.truste.com/blog/wp-content/uploads/MobileAppDevelopments1.jpeg' />";
        }
    }
</script>

运行js函数onchange（）

6 个答案:

A lovely jsbin.com demo