3

我有 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。有人能给我一些启示吗？谢谢你。

4

2 回答 2

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>
于 2013-10-08T13:32:54.843 回答
0

给 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
        });
    })
于 2013-10-08T13:18:26.523 回答