javascript - 使用javascript更改图像src

Question

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

<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

<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。有人可以给我一些启发吗？谢谢。

Answer 1

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

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

删除并替换下面的行。

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