dojo小例子（20）动态加载的Select增加一个option空白项

迷南。 2022-08-24 11:40 193阅读 0赞

有时我们希望下拉菜单带有提示项，比如默认第一项是“--请选择--”；或者“--全部--”表示包含下拉菜单中的所有条件。

有两种实现方式：

1、修改store，在其中添加数据；

2、修改options，在其中添加option

第一种方式：

里面用到了reverse()方法，用unshift()方法也可以

第二种方式：

补充1：

对于FilteringSelect，第二种方式不适用。其余部分不变，只需对第一种方式微调，就能支持FilteringSelect

var select = new FilteringSelect({
      store:os,
      value: "null", // 默认选中我们增加的空白项
      labelAttr:"name",
      searchAttr: "name"
    });

补充2：

谢谢网友的提醒。上面两种方式都是通过增加option来实现，也就是新增的option也会出现在下拉菜单项中。对于菜单项中出现“--全部--”还可以理解，但是出现“--请选择--”就没意义了。我们希望“--请选择--”只是一个hint，在用户没操作该下拉菜单时显示，用户操作时消失，而且不出现在下拉项中。对于FilteringSelect可以这样做：

select.set('displayedValue','--SELECT--');

但是会有个问题，会弹出“输入的值无效”的错误提示，所以还需要

select.set('state','');

消除错误提示，并且结合事件处理才能完美解决。

补充3：

增加option实现“--请选择--”hint，也可以通过删除option达到“--请选择--”不显示到下拉项中的目的。Select的实现：

// 消除'--SELECT--'
    aspect.before(select, "toggleDropDown", function(){
      this.removeOption('NULL'); // '--SELECT--'的value是'NULL'
    });

FilteringSelect的实现：

aspect.before(select, "toggleDropDown", function(){
      this.store.objectStore.remove('NULL');
      this.set('displayedValue','');
    });

补充4：

其实如果只想给FilteringSelect增加hint，还有更简单的方法。设置placeholder:'Quick navigation'即可。dojo在线api页的搜索框就是很好的例子。