zoukankan      html  css  js  c++  java
  • js控制select下拉框--动态隐藏,展示option

    如上图,下拉框中有六个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();
  • 相关阅读:
    OpenWrt 上安装 AdGuard Home
    java网络编程
    如何进行数据库选型
    银行业务中台
    数仓|大数据时代,维度建模过时了吗?
    spqrk相关
    Apache Doris在美团外卖数仓中的应用实践
    hadoop的简单规划
    数据中台建设
    银行数仓分层
  • 原文地址:https://www.cnblogs.com/lydg/p/11363893.html
Copyright © 2011-2022 走看看