jquery - Change image src using javascript

Question

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> 

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>

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.

Answer 1

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

Try Below Code

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