Javascript 确定“多选”中是否只选择了一个选项
在下面的代码中,我使用了一个多选框来让用户选择多个选项。当用户选择其中一个选项时,我正在另一个div中显示所选选项的预览图像 这一切工作,但我想能够更新与图像预览div显示占位符图像时,多个项目被选中 想法Javascript 确定“多选”中是否只选择了一个选项,javascript,jquery,html,Javascript,Jquery,Html,在下面的代码中,我使用了一个多选框来让用户选择多个选项。当用户选择其中一个选项时,我正在另一个div中显示所选选项的预览图像 这一切工作,但我想能够更新与图像预览div显示占位符图像时,多个项目被选中 想法 <select multiple id="opt1-opts"> <option value="diesel_nova_rts_06_1996">Nova RTS-06 - 1996</option> <option valu
<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'/>");
});
$opt1 opts option:selected.length将显示选择了多少子选项。$opt1 opts option:selected.length将显示选择了多少子选项。这里有一个小提示:
HTML:
应该可以了 这里有一把小提琴:
HTML:
应该可以了 这是怎么失败的?错误描述肯定有助于澄清我想确定是否选择了多个项目。>如果是,则显示占位符图像>否则,显示所选项目的图像。在onchange处理程序中,$this.val.length将返回所选选项的数量。最终有效的代码是://总线类型对话框脚本$opt1-opts.changefunction{如果$this.val.length==1$dialog-bus-type-image-info-area.empty.append;否则$dialog-bus-type-image-info-area.empty;};这是如何失败的?错误描述肯定有助于澄清我想确定是否选择了多个项目。>如果选择了,请显示占位符图像>否则,请显示所选项目的图像。在onchange处理程序中,$this.val.length将返回所选选项的数量。最终有效的代码是://总线类型对话框脚本$opt1-opts.changefunction{if$this.val.length==1$dialog-bus-type-image-info-area.empty.append;else$dialog-bus-type-image-info-area.empty;};
<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>
$("#opt1-opts").change(function(){
var selectCount = $("#opt1-opts :selected").length;
if (selectCount == 1){
$('#outputs').html("ONLY one selected");
}else{
$('#outputs').html("");
};
});