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

删除＆amp;替换下面的行。

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

Answer 2

为id选择标签，如

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

和正确的代码如下

$(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
        });
    })

使用javascript更改图像src

2 个答案: