确定多选中是否只选择了一个选项
Determine if ONLY ONE option is selected in multi select
在下面的代码中,我使用了一个多选框,使用户可以选择多个选项。当用户选择其中一个选项时,我将在另一个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'/>");
});
$("#opt1-opts option:selected").length
将为您提供选择了多少个子选项。
这是一把小提琴: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("");
};
});
这样就可以了。
相关文章:
- 按照选项卡索引的顺序循环一个jQuery选择
- 无法在Ionic select中预先选择最后一个选项
- 一次又一次地在新的和相同的选项卡中打开一个url
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- AngularJS ng选项在选择一个选项后删除了默认的空白值
- 如何为下拉列表的每个选项添加一个属性
- 在下拉列表中选择一个选项的值
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 创建了一个选项卡,但点击时不会起作用-jQuery issue/newbie
- 如何通过Primefaces3.5使用JSF2.0验证并在成功的情况下打开一个新的选项卡
- HTML-从mysql生成的选择框中的一个选项更改文本区域的颜色
- 打开一个选项卡,并在firefox网络扩展中向其发出POST请求
- 我如何为列出的选项卡元素编写一个Protractor测试,它会检查它是否's是否处于活动状态
- HTML-使用mysql.php生成一个选择框.我怎样才能更改“;值“;生成的选择框选项的
- 给出<选项>标记一个类?API调用不工作
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- 如何将数组附加到下拉导航栏并禁用其中的一个选项
- 如何打开一个新窗口或选项卡,并将其提供给javascript执行
- 尝试添加一个选项以使用append进行选择,但没有任何结果
- 多个选择选项一个依赖于另一个