iview中Select 选择器多选校验方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iview中Select 选择器多选校验方法相关的知识,希望对你有一定的参考价值。

参考技术A iview提供的select组件中使用multiple属性可以开启多选模式,返回的数据也是数组的形式。
iview使用的校验是根据async-validator来实现数据验证。验证规则可前去查看开源项目
多选模式下的select组件校验使用type为array,可设置len属性来规定数组的长度,设置len:1则不是数组长度为1则通过校验,不设置则数组有元素则通过校验。

type:
'array',
required:
true,
message:
'不能为空'
正则可以写在data中
在rules中引用即可
以上这篇iview中Select
选择器多选校验方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:完美解决iview
的select下拉框选项错位的问题

使用 jQuery 清除启用多选的 <select> 上的所有选择的快速方法?

【中文标题】使用 jQuery 清除启用多选的 <select> 上的所有选择的快速方法?【英文标题】:Quick way to clear all selections on a multiselect enabled <select> with jQuery? 【发布时间】:2011-01-16 07:39:21 【问题描述】:

我是否必须遍历所有的并设置删除“选定”属性或者有更好的方法吗?

【问题讨论】:

【参考方案1】:

只需在您的&lt;select&gt; 中找到所有选定的&lt;option&gt; 标记并删除selected 属性:

$("#my_select option:selected").removeAttr("selected");

从 jQuery 1.6 开始,您应该使用 .prop 而不是删除属性:

$("#my_select option:selected").prop("selected", false);

【讨论】:

对于多选下拉,这不会清除显示的文本。【参考方案2】:

为了清除所有选择,我这样使用它,它对我来说工作正常。 这是脚本:

 $("#ddlMultiselect").multiselect("clearSelection");

 $("#ddlMultiselect").multiselect( 'refresh' );

【讨论】:

此答案与问题无关。 这是什么库?多选不是 jQuery 或 jQueryUI 的一部分。 这是用于引导多选的可能 为我工作:jQuery(".select-access").multiselect("clearSelection") "s" lowerCase. 他指的是这个插件loudev.com/#usage,顺便说一句,“clearSelection”现在不起作用。改用“deselect_all”【参考方案3】:

删除所有选择的最短和最快的方法是在 jQuery .val() 函数中传递空字符串:

$("#my_select").val('')

【讨论】:

只是一个警告,如果你有一个带有 value="" 的选项,这个方法会选择它,所以接受的答案是你的方式jsfiddle.net/yemgudc8【参考方案4】:

这是清除多选或列表框的最佳方式:

 $("#drp_assign_list option[value]").remove();

【讨论】:

【参考方案5】:

在 JQuery 中:

  $("#id option:selected").prop("selected", false);
  $("#id").multiselect('refresh');

【讨论】:

【参考方案6】:

$("#ddlMultiselect").val('').trigger("change");

对于多选下拉菜单,它会清除显示的文本。

【讨论】:

【参考方案7】:

jQuery 的:selected 选择器可能正是您要找的。​​p>

【讨论】:

【参考方案8】:

在 JavaScript 中,

您可以使用多选下拉列表的所有选项列表,该列表将是一个数组。然后循环遍历它以使每个对象中的选定属性为 false。

for(var i=0;i<list.length;i++)

   if(list[i].Selected==true)
    
       list[i].Selected=false;
    

【讨论】:

问题是专门要求一种方法来做到这一点,而无需遍历整个列表(如果列表很长,可能会占用大量资源)【参考方案9】:

您可以传递一个空数组来取消选择所有选择。这是一个例子。来自documentation

val() 允许您传递元素值数组。这很有用 在处理包含 、 和 s 等元素的 jQuery 对象时 .在这种情况下,输入和选项的值 匹配数组的元素之一将被选中选中 而那些具有不匹配的元素之一的值 数组将未选中未选中,具体取决于类型。

$('.clearAll').on('click', function() 
  $('.dropdown').val([]);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="dropdown" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<button class='clearAll'>Clear All Selection</button>

【讨论】:

【参考方案10】:

$('.clearAll').on('click', function() 
  $('.dropdown').val([]);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="dropdown" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<button class='clearAll'>Clear All Selection</button>

【讨论】:

请在你的回答中添加一些解释:)【参考方案11】:
$('.selectpicker').selectpicker('deselectAll');

https://developer.snapappointments.com/bootstrap-select/methods/

【讨论】:

如果您使用的是 bootstrap-select,这是一个有效的方法【参考方案12】:

我尝试了很多解决方案并想出了这个。

下拉菜单的选项和选择仅使用此清除

$("#my-multi option:selected").prop("selected", false);
$("#my-multi option").remove();

但是界面没有更新。所以你必须这样做

$('#my-multi').multiselect('rebuild');

因此,最终的代码是

$("#my-multi option:selected").prop("selected", false);
$("#my-multi option").remove();
$('#my-multi').multiselect('rebuild');

欢迎提出建议和改进。

【讨论】:

$('#my-multi').multiselect('rebuild');这对我有用,谢谢兄弟:)【参考方案13】:

假设您使用的是 David Stutz 的 Bootstrap 多选下拉菜单

$('#selectId').multiselect('deselectAll', false);

但由于某种原因,它在初始化方法中不起作用

【讨论】:

以上是关于iview中Select 选择器多选校验方法的主要内容,如果未能解决你的问题,请参考以下文章

element el-cascader 级联选择器多选限制个数

vue-element-ui-Cascader 级联选择器支持多选---折腾记

IView选择器Select开启搜索功能后动态赋值的坑

iview-select选择器组件的使用&设置默认选中的值

elementui日期选择器只选择月份后如何监听

elementUI的级联选择器el-cascader