您的位置:首页 > Web前端 > JavaScript

js控制select下拉框--动态隐藏,展示option

2020-02-02 10:28 2116 查看

如上图,下拉框中有六个option,如果想隐藏option我们该怎么办呢?(先拿chosen多选做示范)

只需要使用js找到对应的option,然后添加上 style->display:none即可

//遍历所有option,加上display属性

$('#form-field-select-4 option').each(function(){this.style='display:none'});

//chosen更新下拉框

$('#form-field-select-4').trigger("chosen:updated");

 

 

这样以来,就会发现下拉框中所有option都加上了display属性,下拉无结果

如需再次显示,只需要将display设置为list-item即可

$('#form-field-select-4 option').each(function(){this.style='display:list-item'});

$('#form-field-select-4').trigger("chosen:updated");

 

 

如需取消选中,清空重置,id选择器找到对应下拉框,设置val为''即可

$("#form-field-select-4").val("");
$('#form-field-select-4').trigger("chosen:updated");

如果有多个下拉框,将id选择器改为类选择。

正常的select,忽略掉chosen的update即可。

 

删除全部option

$('#form-field-select-4 option').remove();

转载于:https://www.cnblogs.com/lydg/p/11363893.html

  • 点赞
  • 收藏
  • 分享
  • 文章举报
站内首发文章 dinge8714 发布了0 篇原创文章 · 获赞 1 · 访问量 2277 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: