使用以下代码,我使用多选框来启用用户选择多个选项。当用户选择其中一个选项时,我正在另一个div中显示所选选项的预览图像。
这一切都有效,但我希望能够使用图像预览更新div,以便在选择多个项目时显示占位符图像。
想法?
<select multiple id="opt1-opts">
<option value="diesel_nova_rts_06_1996">Nova RTS-06 - 1996</option>
<option value="diesel_nova_rts_06_1998">Nova RTS-06 - 1998</option>
<option value="diesel_nova_rts_06_1999">Nova RTS-06 - 1999</option>
<option>Nova 40LF - 2011</option>
<option value="new_flyer_40lf_2011">New Flyer 40LF - 2011</option>
<option value="orion_v_1995">Orion V WC - 1995</option>
<option value="orion_v_1996">Orion V WC - 1996</option>
<option value="orion_v_1999">Orion V WC - 1999</option>
<option>Orion 40LF - 2011</option>
</select>
<div id="dialog-bus-type-image-info-area">
<img src="imgs/LFS60102.JPG" border=0>
</div>
//bus type dialog scripts
$("#opt1-opts").change(function(){
$("#dialog-bus-type-image-info-area").empty().append("<img src='imgs/busTypes/" + $("#opt1-opts option:selected").val() +".jpg' border='0'/>");
});
答案 0 :(得分:2)
$("#opt1-opts option:selected").length
会为您提供多少子选项。
答案 1 :(得分:2)
这是一个小提琴:http://jsfiddle.net/moonspace/zQQbL/
HTML:
<select multiple id="opt1-opts">
<option value="diesel_nova_rts_06_1996">Nova RTS-06 - 1996</option>
<option value="diesel_nova_rts_06_1998">Nova RTS-06 - 1998</option>
<option value="diesel_nova_rts_06_1999">Nova RTS-06 - 1999</option>
<option>Nova 40LF - 2011</option>
<option value="new_flyer_40lf_2011">New Flyer 40LF - 2011</option>
<option value="orion_v_1995">Orion V WC - 1995</option>
<option value="orion_v_1996">Orion V WC - 1996</option>
<option value="orion_v_1999">Orion V WC - 1999</option>
<option>Orion 40LF - 2011</option>
</select>
<div id="outputs"></div>
JS:
$("#opt1-opts").change(function(){
var selectCount = $("#opt1-opts :selected").length;
if (selectCount == 1){
$('#outputs').html("ONLY one selected");
}else{
$('#outputs').html("");
};
});
应该这样做。 。