[カスタムフィールドを連動させる] サンプル作成

Author: onozaty

README.md

@@ -14,6 +14,7 @@ If this project serves you well, please support this project as a [sponsor](http
 ### Issue / チケット
 
 * [Set the default value by tracker / トラッカーに応じてデフォルト値を設定](./examples/0003.set_default_value_by_tracker/example.md)  
+* [Link custom fields (refining the children according to the parent value) / カスタムフィールドを連動させる(親の値に応じて、子を絞り込む)](./examples/0007.link_custom_fields/example.md)  
 
 ### Issues list / チケット一覧
 
@@ -28,7 +29,6 @@ If this project serves you well, please support this project as a [sponsor](http
 
 ### Old
 
-* [カスタムフィールドを連動させる(親の値に応じて、子を絞り込む)](./old-examples/link_custom_field.js)
 * [コンテキストメニューを選択しやすくする](./old-examples/adjust_context_submenu.css)
 * [チケット一覧のコンテキストメニューでステータス変更を無効に](./old-examples/handling_issue_list_context_menu.js)
 * [チケットのステータスに応じて、カスタムフィールドの表示/非表示を切り替える](./old-examples/change_custom_field_visibility_when_change_status.js)

examples/0007.link_custom_fields/example.md

@@ -0,0 +1,77 @@
+# Link custom fields
+
+Narrows down the choices of the child custom fields according to the value of the parent custom field.  
+親のカスタムフィールドの値に応じて、子のカスタムフィールドの選択肢を絞ります。
+
+## Setting
+
+### Path Pattern
+
+None
+
+### Insert Position
+
+Bottom of issue form
+<!-- 
+Head of all pages
+Bottom of issue form
+Bottom of issue detail
+Bottom of all pages
+-->
+
+### Code
+
+JavaScript
+<!--
+JavaScript
+CSS
+HTML
+-->
+
+```javascript
+$(function() {
+
+  // Note: Change the ID according to the custom field you want to target.
+  const parentFieldId = 'issue_custom_field_values_1';
+  const childFieldId = 'issue_custom_field_values_2';
+
+  const isTarget = function(child, parent) {
+    if (child.val() === '') {
+      // Unselect is always target
+      return true;
+    }
+
+    // forward match
+    return child.text().indexOf(parent.text()) == 0;
+  }
+
+  const narrowChildField = function() {
+
+    const parentSelected = $('#' + parentFieldId + ' > option:selected');
+
+    $('#' + childFieldId + ' > option').each(function() {
+
+      const child = $(this);
+
+      // Narrow down by match.
+      // (In IE, option is not hidden by "display:none", so "disabled" it to make it unselectable.)
+      if (isTarget(child, parentSelected)) {
+        child.show();
+        child.prop('disabled', false);
+      } else {
+        child.hide();
+        this.selected = false;
+        child.prop('disabled', true);
+      }
+    });
+  }
+
+  $('#' + parentFieldId).on('change', narrowChildField);
+
+  narrowChildField();
+});
+```
+
+## Result
+
+![result](./result.gif)