JIRA自定义一个优雅的可多选下拉列表

公司PMO最新发布的规范，需要在每个JIRA故事里输入涉及上线的应用系统名称，最开始就是自定义了一个最简单的文本框，让Owner自己填写，多个系统逗号分隔。后来在数据统计的过程中发现系统应用名每个人写的千奇百怪，难于对齐。所以考虑将所有的系统应用名称导入到JIRA中，让Owner直接选择减少出错概率。但是JIRA内嵌的几个标准自定义控件，实在是不好用。

自定义字段的路径是：右上角的“JIRA管理” ->“问题”->“自定义字段”->"添加"，可多选的字段类型如下。

1. 多个checkbox的复选框，对于我们上百个的微服务系统，全部陈列到一个页面，那简直没法看，故而放弃。
2. Select List(多选)是个带垂直滚动条的多选框，这个控件也有问题，若上百个系统在里面滚动，多选需要按住Ctrl来多选，而且在滚动过程中，如果不小心没按住Ctrl，之前其他人选择的系统名称，可能就丢了，不直观。
3. Select List(级联) 场景不合适，忽略。

checkbox 和 多选列表效果如下图所示。

那么有没有一种更优雅的方式，可以在下拉列表中多选，而且每次选择后可以有直观的提示我选择了哪些呢？当然有！而且只需要简单的几行代码。步骤如下：

1.继续之前的路径，在自定义字段界面，仍然选择Select List(多选)；

2.名称随便输入一个你想要在Issue编辑页上显示的名字，比如我这里是叫"Related Applications"；

3. 描述文本框留空，本文最关键的几行代码就是要存到这个“描述”里；选项先随便填入一个，确定即可；

4. 进入JIRA的数据库中，运行如下SQL，找到这个ID，比如是12000；

select id from customfield 
where cfname='Related Applications'; 
//cfname就是刚才你自定义字段的名称

5.复制如下的代码，将里面的<cf-id>替换为上一步从数据库里查询到的ID，比如customfield_<cf-id>

替换后变为(注意不要不小心加入空格啥的)

customfield_12000

<script type="text/javascript">
(function($) {
   AJS.$("#customfield_<cf-id> option[value='-1']").remove(); //Removes the default value "None"

   function convertMulti(id){
       if (AJS.$('#'+id+"-textarea").length == 0){
           new AJS.MultiSelect({
               element: $("#"+id),
               itemAttrDisplayed: "label",
     errorMessage: AJS.params.multiselectComponentsError            });
       }
   }
 
   AJS.toInit(function(){ 
       convertMulti("customfield_<cf-id>");
   })
 
   JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {
       AJS.$("#customfield_<cf-id> option[value='-1']").remove();
       convertMulti("customfield_<cf-id>");
   });})(AJS.$);
</script>

6. 从JIRA管理重新进入"自定义字段"，选择"编辑"，将上一步全局替换完毕的代码黏贴到“描述”中，保存；

7. 退出继续对自定义字段“配置”多个可选项，手动一个一个添加吧...

我曾经试过直接在数据库表 customfieldoption中插入，后来会引起ID冲突，全部回滚了。如果真的太多选项，你可以网页抓一下network找到那个jspa接口，自己写代码调用接口也可以。反正尽量不要直接操作数据库。

大功告成！！！