使用JavaScript更改图片src [英] Change image src using javascript

问题描述

我有2个下拉列表，分别称为章节"和问题". 问题"将根据章节"列表动态变化.这部分效果很好.我想根据问题"列表更改图像src.所以这是代码.

I have 2 dropdown lists called "chapter" and "question". The "question" will dynamically change according to the "chapter" list. This part works well. I want to change the image src according to the "question" list. So here is the code.

<div id="bookholder">
    <form name="book">
        <select onchange="setOptions(document.book.chapter.options
        [document.book.chapter.selectedIndex].value);" size="1" name="chapter">
            <option selected="selected" value="0">Choose chapter</option>
            <option value="1">Chapter 1</option>
            <option value="2">Chapter 2</option>
        </select>
        <select size="1" name="question">
            <option value="" select="selected">Choose question</option>
        </select>
   </form>
</div>

<img alt="imageholder" id="imageholder" src="default.png">
<p id="imageholder-text"></p> 

使用以下javascript

with the following javascript

<script type="text/javascript"> 
    function go(){ 
        if (document.ga_naar_rooster.pickem.options[document.ga_naar_rooster.pickem.selectedIndex].value != "none") { 
        location = document.ga_naar_rooster.pickem.options[document.ga_naar_rooster.pickem.selectedIndex].value 
                } 
            } 
</script>

<script type="text/javascript"> 
        function setOptions(chosen){ 
            var selbox = document.book.question;
            selbox.options.length = 0; 
            if (chosen=="0"){
                selbox.options[selbox.options.length] = new Option('Select question',' ');

            } if (chosen == "1"){
                selbox.options[selbox.options.length] = new
                Option('question 1','11');
                selbox.options[selbox.options.length] = new
                Option('question 2','12');} 
            if (chosen == "2"){
                selbox.options[selbox.options.length] = new
                Option('question 3','22');}}
</script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#question").change(function() { 
        var nameholder= $("#question").val();
        write (nameholder);
        $('#imageholder').attr('src', nameholder + ".png"); 
        $('#imageholder-text').text(nameholder + ".png"); // For test purposes
        });
    })   
</script>

代码附在此处: http://jsfiddle.net/L8ur6/ 基于问题"列表更改src的功能根本不会更改src.有人可以给我一些启示吗?谢谢你.

The code is attached here: http://jsfiddle.net/L8ur6/ The function to change the src based on the "question" list does not change the src at all. Can someone shed me some light? Thank you.

推荐答案

为您的问题选择标签提供正确的ID.

Give Proper ID to your Question Select tag.

<select size="1" name="question" id="yourId">

删除&在行下方替换.

Remove & Replace below Line.

                 <script type=\"text/javascript\">   
 replace with ==> <script type="text/javascript">

尝试以下代码

<script type="text/javascript">
    $(document).ready(function() {
       $("#yourId").change(function() { 
        var nameholder= $("#yourId").val();
        $('#imageholder').attr('src', nameholder + ".png"); 
        $('#imageholder-text').text(nameholder + ".png"); // For test purposes
         });
    })   
</script>

这篇关于使用JavaScript更改图片src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！