JS實現點選任意位置展現下拉框列表

1.1 版本

1.2 預期效果

下拉框以及下拉複選框預設狀態，必須點選最右側的三角才可以實現下拉，不夠人性化。使用者大多更傾向於點選任意位置，都可以展開下拉框選項，具體效果如下：

優化前：                                                      

優化後：                                

1.3 實現思路

在參數面板的下拉框元件新增 JS 事件，控制下拉框展開。

開啟%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted.cpt。點選參數面板，選中下拉框元件，新增初始化後事件，如下圖所示：

JS 程式碼如下：

var self = this;
$('input',this.element).click(function(){
    if(self.$view.css('display')=='none'){
        self.onTriggerClick();
    }
});

注：理論上來說，只需要在元件的初始化後事件中新增就可以。如果不生效，可以嘗試在元件的編輯前事件中新增一模一樣的程式碼。

儲存範本，點選預覽，效果如 1.2 節圖所示。

注：不支援行動端。

點選下載範本：點選任意位置展現下拉框列表.cpt