更改另一个下拉框时如何更改下拉内容和图像？

Question

我有此javascript代码，当下拉列表A更改时，下拉列表B和C的值也更改了。

我要添加的是，当下拉列表A更改时，它也会同时更改图像。 <img id="sheetimage" src="14_image.png"/>

实际上，javascript是从代码中改编而成，只能更改1个其他下拉框，所以我想知道是否也可以简化它？

HTML：

<select id='pagetype' name='pagetype'>
<option value='14'>14 Per Sheet</option>
<option value='4'> 4 Per Sheet</option>
</select>

<select id='startlabel' name='startlabel'>
</select>

<select id='size' name='fontsize'>
</select>

<img id="sheetimage" src="14_image.png"/>

Java脚本

(function(){
    //{"id":[{value:sweet, text:Sweet}.....]}
    var bOptions = {"14":["1","2","3","4","5","6","7","8","9","10","11","12","13","14"], "4":["1","2","3","4"]};
var cOptions = {"14":["16","15","14","13"], "4":["36","32","28"]};

var A = document.getElementById('pagetype');
var B = document.getElementById('startlabel');
var C = document.getElementById('size');

A.onchange = function(){

    B.length = 0;
    C.length = 0;

    var _val = this.options[this.selectedIndex].value;

    for ( var i in bOptions[_val]){
        var op = document.createElement('option');
        op.value = bOptions[_val][i];
        op.text = bOptions[_val][i];
        B.appendChild(op);
    }

        for ( var i in cOptions[_val]){
        var op = document.createElement('option');
        op.value = cOptions[_val][i];
        op.text = cOptions[_val][i];
        C.appendChild(op);
    }

};

  A.onchange();

})();

https://jsfiddle.net/vn1gvrn6/

Answer 1

这是工作副本：

 (function() { //{"id":[{value:sweet, text:Sweet}.....]} var bOptions = { "14": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"], "4": ["1", "2", "3", "4"] }; var cOptions = { "14": ["16", "15", "14", "13"], "4": ["36", "32", "28"] }; var images = { "14": "img-14", "4": "img-4" }; var A = document.getElementById('pagetype'); var B = document.getElementById('startlabel'); var C = document.getElementById('size'); var D = document.getElementById('html'); A.onchange = function() { B.length = 0; C.length = 0; var _val = this.options[this.selectedIndex].value; for (var i in bOptions[_val]) { var op = document.createElement('option'); op.value = bOptions[_val][i]; op.text = bOptions[_val][i]; B.appendChild(op); } for (var i in cOptions[_val]) { var op = document.createElement('option'); op.value = cOptions[_val][i]; op.text = cOptions[_val][i]; C.appendChild(op); } D.className = images[_val]; }; A.onchange(); })(); 

 .img-14 { background-image: url('https://tctechcrunch2011.files.wordpress.com/2014/06/apple_topic.png?w=220'); background-position: center; background-size: 50px 20px; background-repeat: no-repeat; } .img-4 { background-image: url('http://www.technologytell.com/apple/files/2013/07/Apple_Logo_by_SA_08-258x300.jpg'); background-position: center; background-size: 50px 20px; background-repeat: no-repeat; } 

 <select id='pagetype' name='pagetype'> <option value='14'>14 Per Sheet</option> <option value='4'>4 Per Sheet</option> </select> <select id='startlabel' name='startlabel'> </select> <select id='size' name='fontsize'> </select> <img id="sheetimage" src="14_image.png" /> <textarea id='html' name='html'></textarea> 

Answer 2

只需使用：

img.src = "myImageUrl";