为相扑下拉菜单设置选择限制
set limit in selection for sumo dropdown
我已将此 jquery 插件 SumoSelect 用于带复选框的下拉菜单 select
<select multiple="multiple" class="SlectBox" name="cat_ids[]">
<option value="op1">Options1</option>
<option value="op2">Options2</option>
<option value="op3">Options3</option>
<option value="op4">Options4</option>
<option value="op5">Options5</option>
</select>
此下拉菜单与检查弓 selection 配合使用效果很好。
但是我想用这个 selection.
为不同的用户设置一些限制
我尝试了下面的 jquery 代码,但它无法正常工作
jQuery(document).ready(function($){
var last_valid_selection = null;
$('.SlectBox').change(function(event) {
if ($(this).val().length > 2) {
alert('You can only choose 2!');
$(this).val(last_valid_selection);
} else {
last_valid_selection = $(this).val();
}
}); });
您可以使用相扑方法 unSelectAll
和 selectItem
以及插件初始化上的 triggerChangeCombined
选项。
参考:http://hemantnegi.github.io/jquery.sumoselect/
在更改事件中,如果提高了限制,您可以取消全选并通过每个元素的索引设置最后一个有效选择。
代码:
$('#island').SumoSelect({ triggerChangeCombined: true, placeholder: "TestPlaceholder" });
var last_valid_selection = null;
$('#island').change(function (event) {
if ($(this).val().length > 2) {
alert('You can only choose 2!');
var $this = $(this);
$this[0].sumo.unSelectAll();
$.each(last_valid_selection, function (i, e) {
$this[0].sumo.selectItem($this.find('option[value="' + e + '"]').index());
});
} else {
last_valid_selection = $(this).val();
}
});
有更好的样本。
不要忘记触发更改组合:true
var last_selection = null;
var load_selection = false;
$('#SeasonIdList').change(function (event) {
if (load_selection == true) {
return false;
}
if ($(this).val() != null && $(this).val().length > 3) {
load_selection = true;
var $this = $(this);
$this[0].sumo.unSelectAll();
$.each(last_selection, function (i, e) {
$this[0].sumo.selectItem($this.find('option[value="' + e + '"]').index());
});
load_selection = false;
} else {
last_selection = $(this).val();
}
});
我已将此 jquery 插件 SumoSelect 用于带复选框的下拉菜单 select
<select multiple="multiple" class="SlectBox" name="cat_ids[]">
<option value="op1">Options1</option>
<option value="op2">Options2</option>
<option value="op3">Options3</option>
<option value="op4">Options4</option>
<option value="op5">Options5</option>
</select>
此下拉菜单与检查弓 selection 配合使用效果很好。 但是我想用这个 selection.
为不同的用户设置一些限制我尝试了下面的 jquery 代码,但它无法正常工作
jQuery(document).ready(function($){
var last_valid_selection = null;
$('.SlectBox').change(function(event) {
if ($(this).val().length > 2) {
alert('You can only choose 2!');
$(this).val(last_valid_selection);
} else {
last_valid_selection = $(this).val();
}
}); });
您可以使用相扑方法 unSelectAll
和 selectItem
以及插件初始化上的 triggerChangeCombined
选项。
参考:http://hemantnegi.github.io/jquery.sumoselect/
在更改事件中,如果提高了限制,您可以取消全选并通过每个元素的索引设置最后一个有效选择。
代码:
$('#island').SumoSelect({ triggerChangeCombined: true, placeholder: "TestPlaceholder" });
var last_valid_selection = null;
$('#island').change(function (event) {
if ($(this).val().length > 2) {
alert('You can only choose 2!');
var $this = $(this);
$this[0].sumo.unSelectAll();
$.each(last_valid_selection, function (i, e) {
$this[0].sumo.selectItem($this.find('option[value="' + e + '"]').index());
});
} else {
last_valid_selection = $(this).val();
}
});
有更好的样本。
不要忘记触发更改组合:true
var last_selection = null;
var load_selection = false;
$('#SeasonIdList').change(function (event) {
if (load_selection == true) {
return false;
}
if ($(this).val() != null && $(this).val().length > 3) {
load_selection = true;
var $this = $(this);
$this[0].sumo.unSelectAll();
$.each(last_selection, function (i, e) {
$this[0].sumo.selectItem($this.find('option[value="' + e + '"]').index());
});
load_selection = false;
} else {
last_selection = $(this).val();
}
});